<ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">tab1</label> <div id="tab-content1" class="tab-content"> <p>tab1 content</p> </div> </li> <li> <input type="radio" name="tabs" id="tab2" /> <label for="tab2">tab2</label> <div id="tab-content2" class="tab-content"> <p>tab2 content</p> </div> </li> <li> <input type="radio" name="tabs" id="tab3" /> <label for="tab3">tab3</label> <div id="tab-content3" class="tab-content"> <p>tab3 content</p> </div> </li> </ul>
body { background: #D7D3C8; color: #424F5A; text-align: left; } .tabs { float: none; list-style: none; margin: auto; padding: 0; position: relative; text-align: left; width: 380px; } .tabs li { display: block; float: left; } .tabs input[type="radio"] { display: none; position: absolute; } .tabs label { background: #AAA; border-radius: 5px 5px 0 0; cursor: pointer; display: block; font-size: 20px; padding: 14px 21px; position: relative; transition: all 0.2s ease-in-out; top: 4px; width: 50px; -webkit-border-radius: 5px 5px 0 0; -webkit-transition: all 0.2s ease-in-out; } .tabs label:hover { background: #CCC; } .tabs .tab-content{ background: #FFF; display: none; font-size: 17px; left: 0; line-height: 25px; overflow: hidden; position: absolute; top: 52px; width: 100%; z-index: 2; } .tabs .tab-content p{ padding: 0 20px; } .tabs [name="tabs"]:checked + label { background: #FFF; padding-top: 17px; top: 0; } .tabs [name="tabs"]:checked ~ .tab-content { display: block; } @media only screen and (max-width: 400px) { .tabs { width: 100%; } .tabs li { float: none; margin-top: 20px; } .tabs .tab-content { display: block; position: relative; top: 0; } .tabs label { background: #FFF; padding-top: 17px; top: 0; } .tabs label:hover { background: #FFF; } }