<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/oliverdore/pen/ybJan?depth=everything&order=popularity&page=37&q=tab&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">* {
box-spacing: border-box;
}
body {
background: #FFF;
}
.tabs {
display: block;
list-style: none;
margin: 0 auto;
padding: 0;
width: 800px;
}
.tabs * {
transition: all 350ms cubic-bezier(.7, .5, .3, 1);
}
.tabs li {
border-right: 1px solid #FFF;
counter-increment: tab;
display: inline;
perspective: 350px;
float: left;
height: 90px;
opacity: 0;
overflow: hidden;
padding-top: 100px;
position: relative;
transform-origin: 50% 0;
transform: translateY(400px);
transition: all 600ms cubic-bezier(.3, .7, .1, 1);
width: 33%;
vertical-align: top;
}
/* Initial transition */
.tabs li:nth-child(2) {
transition-delay: 150ms;
}
.tabs li:nth-child(3) {
transition-delay: 300ms;
}
.ready .tabs li {
opacity: 1;
transform: translateY(0);
}
.tabs li .fold {
backface-visibility: hidden;
transform-style: preserve-3d;
}
/* Tab heading */
.tabs li h3 {
backface-visibility: hidden;
background: #444;
color: #FFF;
font-size: 13px;
line-height: 50px;
margin: 0;
height: 50px;
text-transform: uppercase;
}
.tabs li h3:before {
background-repeat: no-repeat;
background-position: 50% 50%;
background-origin: content-box;
background-size: contain;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 100%;
color: rgba(255, 255, 255, .6);
content: counter(tab);
display: block;
float: left;
font-size: 12px;
font-weight: 400;
height: 24px;
line-height: 25px;
margin: 10px 10px 0 10px;
text-align: center;
width: 24px;
}
/* Revealed copy */
li .fold p {
backface-visibility: hidden;
background: #222;
color: #222;
font-size: 12px;
line-height: 140%;
height: 55px;
margin: -1px 0 0;
padding: 5px 15px 15px;
transform: rotateX(-60deg);
transform-origin: 50% 0;
}
/* Call to action */
.tabs li .more {
backface-visibility: hidden;
background: #EAEAEA;
bottom: 0;
border-bottom: 1px solid rgba(0, 0, 0, .1);
box-shadow: inset 0 4px 2px -3px rgba(0, 0, 0, .3);
color: #3A3F41;
font-size: 11px;
font-weight: bold;
height: 40px;
left: 0;
line-height: 43px;
text-decoration: none;
text-transform: uppercase;
position: absolute;
padding: 0 15px;
width: 100%;
}
.tabs li:before,
.tabs li:after {
background: #444;
backface-visibility: hidden;
content: '';
display: block;
width: 2px;
height: 6px;
position: absolute;
transform-origin: 50% 50%;
z-index: 2;
}
.tabs li:before {
bottom: 19px;
right: 20px;
transform: rotate(-45deg);
}
.tabs li:after {
bottom: 15px;
right: 20px;
transform: rotate(45deg);
}
/* Tab hover */
.tabs li:hover .fold {
transform: translateY(-75px);
}
.tabs li:hover h3 {
background: #222;
}
.tabs li:hover .more {
color: #111;
}
li:hover .fold p {
transform: rotateX(0deg);
background: #222;
color: #BBB;
outline: 1px solid transparent;
}
li:hover:before,
li:hover:after {
background: #111;
}
@media only screen and (max-width:800px) {
.tabs {
width: 600px;
}
.tabs li {
width: 49%;
}
.tabs li:nth-child(3) {
display: none;
}
}</style></head><body>
<ul class="tabs">
<li>
<div class="fold">
<h3>Introduction</h3>
<p>In aliquam nisi nec mauris ultricies eleifend. Vivamus sit amet vulputate tellus. Cras eu purus ac diam.</p>
</div>
<a href="#" class="more">More</a>
</li>
<li>
<div class="fold">
<h3>Another Section</h3>
<p>Mauris vehicula placerat erat, vitae condimentum magna volutpat ac. Cras tortor lorem, rhoncus at tortor id.</p>
</div>
<a href="#" class="more">More</a>
</li>
<li>
<div class="fold">
<h3>Further reading</h3>
<p>Ut et pharetra velit, vitae dictum erat. Morbi sit amet dictum eros. Curabitur hendrerit leo at lectus eleifend, a volutpat.</p>
</div>
<a href="#" class="more">More</a>
</li>
</ul>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >jQuery(function() {
setTimeout(function(){
$('body').addClass('ready');
}, 10);
});
//# sourceURL=pen.js
</script>
</body></html>
