Pure CSS Tabs
02/09/2021
Contents
Demo
Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pure CSS Tabs</title>
<link rel="stylesheet" href="https://use.typekit.net/opg3wle.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://demo.plantpot.works/assets/css/normalize.css">
</head>
<body>
<div id="container">
<div class="tabs">
<input id="designer" type="radio" name="tab-item" checked>
<input id="developer" type="radio" name="tab-item">
<nav class="tab-items">
<label class="tab-item tab-item-designer" for="designer">
<svg class="svg-designer" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.5,7 C8.13076923,7 3,10.5555556 3,15 C3,15.8888889 3.17692308,16.7777778 3.61923077,17.5777778 C4.50384615,19.3555556 6.80384615,19.8888889 8.39615385,18.7333333 C10.5192308,17.2222222 13.5269231,18.7333333 13.5269231,21.4 L13.5269231,23 C13.8807692,23 14.1461538,23 14.5,23 C20.8692308,23 26,19.4444444 26,15 C26,13.0444444 25.0269231,11.2666667 23.4346154,9.93333333"/>
<path d="M15.9178204,10.2 C17.2770642,10.2 18.3964414,11.24 18.3964414,12.52 C18.4763969,13.88 17.1971087,15 15.7579093,15 L15.7579093,15 L12,15 L12.1555994,14.9467141 C12.8613874,14.6736 13.2792883,14.0613333 13.2792883,13.24 L13.2792883,13.24 L13.2792883,12.68 C13.2792883,11.32 14.4786211,10.2 15.9178204,10.2 Z M25.2843545,3.1460556 L25.3724138,3.21818182 C25.6758621,3.50909091 25.6758621,3.94545455 25.3724138,4.23636364 L18.7724138,11 L16.8,9.61818182 L24.2344828,3.21818182 C24.5103448,2.95371901 24.9742947,2.92967693 25.2843545,3.1460556 Z"/>
</g>
</svg>
Designer
</label>
<label class="tab-item tab-item-developer" for="developer">
<svg class="svg-developer" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<path d="M17.6192699,6.01912458 C17.8960229,6.0948734 18.0591094,6.36946286 17.9800372,6.63458372 L13.023194,23.6354588 C12.9589477,23.857971 12.746441,24 12.5191082,24 C12.4746301,24 12.4252099,23.9952657 12.3807317,23.9810628 C12.1039788,23.905314 11.9408922,23.6307245 12.0199645,23.3656037 L16.9768077,6.36472856 C17.0558799,6.0996077 17.3425169,5.94337576 17.6192699,6.01912458 Z M19.8871634,8.1408935 L26.8144371,14.6127538 C26.8282475,14.6241013 26.8415731,14.6362613 26.8543454,14.6492339 C27.0534078,14.8514161 27.0484312,15.1739448 26.8394158,15.3664992 L19.89214,21.860398 C19.7876322,21.9518614 19.6582417,22 19.5288512,22 C19.3895076,22 19.2551405,21.9470475 19.1506327,21.8459564 C18.9515704,21.6437743 18.956547,21.3212456 19.1655624,21.1286911 L25.7230008,14.998 L19.1605859,8.87260041 C18.9515704,8.68004596 18.9465938,8.35751726 19.1456562,8.15533508 C19.3447185,7.95315291 19.678148,7.94833905 19.8871634,8.1408935 Z M10.8542547,8.15533508 C11.053441,8.35751726 11.0484614,8.68004596 10.8393158,8.87260041 L4.281,15.002 L10.8393158,21.1286911 C11.0484614,21.3212456 11.053441,21.6437743 10.8542547,21.8459564 C10.7496819,21.9518614 10.6152312,22 10.4758008,22 C10.3463297,22 10.2118789,21.9518614 10.1122858,21.8555842 L3.16068414,15.3664992 C3.15147136,15.3575359 3.14859715,15.3548147 3.14574516,15.3520576 L3.1062912,15.3071152 L3.103,15.303 L3.107,15.307 L3.099,15.297 L3.07305165,15.2590523 C3.06205231,15.2424895 3.05272768,15.2249472 3.04453374,15.2070214 C3.04236753,15.200412 3.03978224,15.1944444 3.03731889,15.1884409 C3.02849046,15.1689203 3.02155906,15.1481252 3.01604737,15.1270361 C3.01408552,15.1172391 3.01198298,15.108251 3.01013356,15.0992251 C3.00570328,15.0797946 3.00288485,15.0592665 3.00135665,15.0386527 L3.00037758,15.0192918 L3,15.0002743 C3.00004095,14.9879611 3.00054688,14.9755276 3.00151936,14.9631186 C3.00288508,14.941545 3.0059291,14.9197372 3.01042941,14.8981749 C3.01245935,14.8910886 3.01410733,14.8841064 3.01590821,14.877153 C3.0274715,14.8293616 3.0469602,14.7829664 3.07374529,14.7397383 C3.07997865,14.7309915 3.08585335,14.7220998 3.09203993,14.7133537 C3.1016631,14.6988076 3.11269819,14.6849366 3.1245837,14.6715431 C3.13167075,14.6639444 3.13857571,14.6565112 3.14574516,14.6492339 C3.15400131,14.6410274 3.15731625,14.637893 3.16068414,14.6347923 L10.1122858,8.1408935 C10.3214314,7.94833905 10.6550685,7.95315291 10.8542547,8.15533508 Z M3.09147842,15.2882026 L3.099,15.297 L3.103,15.303 L3.09853064,15.2978439 C3.09613626,15.2946517 3.09378552,15.2914377 3.09147842,15.2882026 Z"/>
</svg>
Developer
</label>
</nav>
<div class="tab-content tab-content-designer">
<h2>Designer's Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br></p>
</div>
<div class="tab-content tab-content-developer">
<h2>Developer's Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br></p>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
body {
background-color: #202a33;
font-family: futura-pt, sans-serif;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
padding: 30px 15px;
}
.tabs {
position: relative;
width: 100%;
max-width: 300px;
overflow: hidden;
border-radius: 4px;
}
.tabs nav {
display: flex;
justify-content: center;
align-items: center;
}
.tab-item {
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
width: 50%;
padding: 10px 0;
background-color: #fff;
color: #3d3935;
font-size: 1.125rem;
text-align: center;
letter-spacing: 1px;
cursor: pointer;
}
.tab-item svg {
margin-right: 4px;
}
.svg-designer {
stroke: #3d3935;
}
.svg-developer {
fill: #3d3935;
}
input[type="radio"] {
display: none;
}
.tab-content {
padding: 15px;
color: #3d3935;
font-size: 1rem;
}
.tab-content h2 {
margin: 10px 0;
font-size: 1.125rem;
letter-spacing: 1px;
}
.tab-content-designer,
.tab-content-developer {
display: none;
}
#designer:checked ~ .tab-content-designer,
#developer:checked ~ .tab-content-developer {
display: block;
}
#designer:checked ~ .tab-items .tab-item-designer {
background-color: #ec264a;
color: #fff;
}
#developer:checked ~ .tab-items .tab-item-developer {
background-color: #22966f;
color: #fff;
}
#designer:checked ~ .tab-content-designer {
background-color: #f2bce4;
}
#developer:checked ~ .tab-content-developer {
background-color: #bcffe9;
}
#designer:checked ~ .tab-items .svg-designer {
stroke: #fff;
}
#developer:checked ~ .tab-items .svg-developer {
fill: #fff;
}
@media screen and (max-width: 480px) {
#container {
height: auto;
align-items: flex-start;
}
}