<div class="tabs">
<input type="radio" name="tab" id="tab1" checked>
<label for="tab1">Tab 1</label>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec.</p>
<p>Nunc blandit in pellentesque platea ultrices proin ornare lectus tempus pharetra scelerisque aptent euismod feugiat tempor sem mi donec vitae. Vulputate lectus quis laoreet imperdiet eu dictum dui elit ante mollis ad aliquam vehicula litora nullam id curabitur auctor, enim. Mauris augue, feugiat egestas feugiat, eu curabitur pellentesque mollis mi litora est sollicitudin sem rutrum tincidunt accumsan, egestas velit accumsan.</p>
</div>
<input type="radio" name="tab" id="tab2">
<label for="tab2">Tab 2</label>
<div>Content for tab 2</div>
</div>body {
font-family: Arial, Helvetica, sans-serif;
}
.tabs {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.tabs > label {
order: 1;
display: inline-block;
background-color: #4d4d4d;
line-height: 50px;
box-sizing: border-box;
margin: 0;
padding: 0 20px 0 20px;
font-weight: bold;
color: #f9f9f9;
border-top: 5px solid #4d4d4d;
}
.tabs > input[type="radio"] {
display: none;
}
.tabs > input[type="radio"]:checked + label {
background-color: #eeeeee;
color: #4d4d4d;
}
.tabs > input[type="radio"]:checked + label + div {
display: block;
}
.tabs > div {
order: 2;
display: none;
box-sizing: border-box;
background-color: #eeeeee;
width: 100%;
padding: 15px;
color: #1a1a1a;
height: 100%;
}Nothing to show yetType HTML, CSS or JavaScript and your page appears here.
Click any element to find its code Esc
Check this code before you run it
It came from a shared link. It runs with fewer permissions, so it cannot open pop-ups, submit forms or start downloads.
0.00s / 0.00s
Nothing has animated yet. Hover, click or type in the preview and each CSS animation, transition or
element.animate() call shows up here as it plays.