Responsive tabs using only HTML CSS

Welcome to today's blog. Today we will learn how we can design a Responsive Tab with just HTML and CSS. We have shared many projects on this blog before. If you have time, you can take a look at them. I suggest you watch the video tutorial of this project below. Because by doing this, you will understand the source code better. You can subscribe to our YouTube channel for the future. Because on our YouTube channel, we share a lot of video tutorials and source code related to the front-end Development.

I hope you watched the whole video and understood what we are going to learn today. A tab is a clickable area through which we can go to different web pages or segments. When we click on the tab's label, the content of that tab becomes visible to us. The contents of the other tabs are then hidden. Many websites nowadays use this tab element to create FAQ sections, login forms, navigations, etc.

To design this tab project, we took a div called 'wrapper' and put an input radio button in it. Then I have given a label and content below. Thus I have taken three segments like this with different IDs for each. In CSS, we will align the 'box' div or the elements of the tab through CSS Flexbox. Then I styled each label and content of the tab element. Content will first be 'Display: none'. After that, I use 'Display: block' with the help of a 'checked' CSS selector. This means that when we click a label on a tab or an element of the tab is 'checked', the content associated with that label will be visible to us. We've taken the help of CSS Media Queries to make this project responsive. To make the project look good on mobile devices, we have manipulated some CSS values in the media query.

You May Also like:

HTML CSS Automatic Image Slideshow
CSS Dropdown Navigation Bar

Responsive tabs using only HTML and CSS [ Source Code ]:

To create this project, first, create two files. One is HTML and, the other is CSS. Add the CSS file to the HTML File. Copy the codes from the given code box and paste them into your HTML and CSS file. If you face any problem with the following code, download the source code from the download button.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>how to create Responsive tabs using only html and css</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="box">
		<input checked="checked" id="box1" name="box" type="radio"> 
		<label for="box1">HTML</label>
		<div class="content">
			<h1>What is HTML?</h1>
			<p>The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
			<p>Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
		</div>
		<input id="box2" name="box" type="radio"> 
		<label for="box2">CSS</label>
		<div class="content">
			<h1>What is CSS?</h1>
			<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.</p>
			<p>CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file which reduces complexity and repetition in the structural content as well as enabling the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.</p>
		</div>
		<input id="box3" name="box" type="radio"> 
		<label for="box3">JAVASCRIPT</label>
		<div class="content">
			<h1>What is Javascript?</h1>
			<p>JavaScript often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. avaScript is high-level, often just-in-time compiled and multi-paradigm. It has dynamic typing, prototype-based object-orientation and first-class functions.</p>
			<p>Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. Over 97% of websites use it client-side for web page behavior,often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on the user's device.</p>
		</div>
	</div>
    </div>
</body>
</html>

ADD CSS:

body {
	background: beige;
}
.wrapper {
	min-height: 100vh;
	box-sizing: border-box;
	padding-top: 5%;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.5;
	max-width: 960px;
	margin: 0 auto;
}
.box {
	display: flex;
	flex-wrap: wrap;
}
.box label {
	background: #ec6633;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
	order: 1;
	display: block;
	padding: 16px 127px;
	margin-right: 4px;
	cursor: pointer;
}
.box .content {
	display: none;
	padding: 30px;
	background: #fff;
	box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
	order: 99;
	flex-grow: 1;
	width: 100%;
}
.box input[type="radio"] {
	display: none;
}
.box input[type="radio"]:checked+label {
	background: #fff;
}
.box input[type="radio"]:checked+label+.content {
	display: block;
}
@media (max-width: 600px) {
	.box .content, .box label {
		order: initial;
	}
	.box label {
		width: 100%;
		margin-right: 0;
		margin-top: 4px;
	}
}

I hope you have implemented the code nicely. If you want to get more source code like this, stay tuned. We would be very grateful if you could share the articles of this blog, hope to see you again in the next project. Until then, stay well. Thank you very much for visiting this blog.

DOWNLOAD CODE

Post a Comment

Post a Comment

About Us

Contact Form

Responsive tabs using only HTML CSS

You might like

Post a Comment

Post a Comment

Contact Form