tabs css only
.label {
width: 100%;
padding: 20px 30px;
background: #e5e5e5;
cursor: pointer;
font-weight: bold;
font-size: 18px;
color: #7f7f7f;
transition: background 0.1s, color 0.1s;
}
.label:hover {
background: #d8d8d8;
}
.label:active {
background: #ccc;
}
.input:focus + .label {
box-shadow: inset 0px 0px 0px 3px #2aa1c0;
z-index: 1;
}
.input:checked + .label {
background: #fff;
color: #000;
}
@media (min-width: 600px) {
.label {
width: auto;
}
}tabs css only
* {
box-sizing: border-box;
}
body {
padding: 10px;
background: #f2f2f2;
}tabs css only
<div class="tabs">
<input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
<label for="tab-1" class="label">Orange</label>
<div class="panel">
<h1>Orange</h1>
<p>The orange (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
<p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p>
</div>
<input name="tabs" type="radio" id="tab-2" class="input"/>
<label for="tab-2" class="label">Tangerine</label>
<div class="panel">
<h1>Tangerine</h1>
<p>The tangerine (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
<p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
</div>
<input name="tabs" type="radio" id="tab-3" class="input"/>
<label for="tab-3" class="label">Clemantine</label>
<div class="panel">
<h1>Clemantine</h1>
<p>A clementine (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to tangerines, they tend to be easy to peel.</p>
</div>
</div>tabs css only
.input {
position: absolute;
opacity: 0;
}tabs css only
<div class="tab content1">Tab1 Contents</div><div class="tab content2">Tab2 Contents</div><div class="tab content3">Tab3 Contents</div><div class="tab content4">Tab4 Contents</div><div class="tab content5">Tab5 Contents</div>tabs css only
.panel {
display: none;
padding: 20px 30px 30px;
background: #fff;
}
@media (min-width: 600px) {
.panel {
order: 99;
}
}
.input:checked + .label + .panel {
display: block;
}tabs css only
.tabs {
display: flex;
flex-wrap: wrap;
max-width: 700px;
background: #efefef;
box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
