Pure HTML CSS Tabs Design

byCodingFlicks -May 23, 2024

0

Tabs are user interface elements of a website that allow you to navigate between different sections or pages of content within the same webpage. This does not require a user to reload the entire page. These tabs usually have clickable buttons to view different content panels or sections. Today we will create a simple but effective HTML tab or CSS tab without the help of JavaScript that you can use on your website. The following video tutorial shows the process of creating this HTML CSS tab element. We hope you will watch the entire video tutorial.

Video Tutorial:

We hope you have watched the video tutorial based on CSS tabs or HTML tabs. This web design element can be used as the main navigation. Content can be organized through this. For example, a product's details, specifications, and reviews can be displayed as tab content. For this, e-commerce sites use tabs to display their products. Also, these tabs are also used in form design. Suppose, your website has a multi-step form for customers to fill. Tabs are a useful option for this type of form.

Tabs are useful elements of a website. Because with it, useful website information can be found without excessive scrolling or page reload. By using tabs, a lot of information can be provided to the user using very little space. In addition, tabs serve as a functional UI to improve content organization and visual appeal.

Our snippet contains three clickable buttons in an unordered list called tabs inside the parent div. A separate ID is taken for each button. Below is the content according to that ID. The display flex property is used to align clickable buttons horizontally. To display the selected tab content we used tab-content:target and provided the display block value.

You May Aldo like:

Pure HTML CSS Tabs Design [ Source Code ]:

To create the HTML CSS Tabs, you need to create an HTML and a CSS file. Copy the code from the code box below and paste it into your file. Save the code and test it in your browser. If there is any problem you can download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- Website: codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to create tabs with HTML and CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        
        <ul class="tabs">
            <li class="tab"><a href="#tab1">Tab 1</a></li>
            <li class="tab"><a href="#tab2">Tab 2</a></li>
            <li class="tab"><a href="#tab3">Tab 3</a></li>
        </ul>
        
        <div id="tab1" class="tab-content">
            <h2>First Header</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quisquam reiciendis eaque, saepe illum, veritatis eligendi, cum rerum magni culpa facere? Labore harum aut quibusdam ullam, ut itaque adipisci officiis molestias debitis dicta sequi magni. Ea facere quas reiciendis veritatis?</p>
        </div>

        <div id="tab2" class="tab-content">
            <h2>Second Header</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quisquam reiciendis eaque, saepe illum, veritatis eligendi, cum rerum magni culpa facere? Labore harum aut quibusdam ullam</p>
        </div>

        <div id="tab3" class="tab-content">
            <h2>Third Header</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quisquam reiciendis eaque, saepe illum, veritatis eligendi, cum rerum magni culpa facere? Labore harum aut quibusdam ullam, ut itaque adipisci officiis molestias debitis dicta sequi magni. Ea facere quas reiciendis veritatis?</p>
        </div>    
    </div>
</body>
</html>

ADD CSS:

body, h1, ul, li {
	margin: 0;
	padding: 0;
}
body {
	background: #4d5bf9;
	display: grid;
	place-items: center;
	height: 100vh;
	font-family: "Montserrat", sans-serif;
}
.box {
	width: 500px;
	height: 300px;
	background: #fff;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
	padding: 15px;
}
.tabs {
	list-style: none;
	display: flex;
}
.tab {
	margin-right: 10px;
	padding: 10px;
	cursor: pointer;
	width: 135px;
	text-align: center;
	background-color: #5f6cf9;
}
.tab a {
	text-decoration: none;
	color: #fff;
	font-weight: 900;
}
.tab-content p {
	line-height: 1.8;
	font-weight: 500;
	opacity: .7;
}
.tab:target {
	background-color: #4d5bf9;
}
.tab-content {
	display: none;
}
.tab-content:target {
	display: block;
}

Many websites these days use tabs as a user interface (UI) element. Some of them are educational websites, e-commerce websites, corporate websites, blogs and news sites, etc. We hope the code working for you. Be sure to explore more of our content to learn about other essential elements that make websites user-friendly and functional. If you want to get more source code then you can visit our homepage and click on the Load More button. Thanks for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.