Dalam tutorial ini kita akan membahas cara membuat Tabs Responsive dengan CSS. Tab konten hampir di mana-mana saat ini, Anda dapat melihat di situs sidebar, login / daftar halaman, portofolio / situs web pribadi dan sebagainya. Tab content digunakan untuk menampilkan beberapa kategori dari konten yang Anda dapat beralih antara satu dan yang lainnya tanpa reload halaman. Sebagai contoh, pada halaman otentikasi pendaftaran form, Anda akan memiliki dua atau tiga tab tergantung. Satu untuk form login, satu untuk pendaftaran dan kadang-kadang satu untuk reset kata sandi.

Pure Css3 Drop down Menu Multilevel

Mari kita Mulai Membuat Tab Responsive dengan CSS

<ul class="tabs">
        <li class="labels">
            <label for="tab1" id="label1">tab 1</label>
            <label for="tab2" id="label2">tab 2</label>
            <label for="tab3" id="label3">tab 3</label>
        </li>
        <li>
            <input type="radio" checked name="tabs" id="tab1">
            <div id="tab-content1" class="tab-content">
                <h3>Tab 1</h3>
                <!-- Your Content Here -->
            </div>
        </li>
        <li>
            <input type="radio" name="tabs" id="tab2">
            <div id="tab-content2" class="tab-content">
                <h3>Tab 2</h3>
                <!-- Your Content Here -->
            </div>
        </li>
        <li>
            <input type="radio" name="tabs" id="tab3">  
            <div id="tab-content3" class="tab-content">
                <h3>Tab 3</h3>
                <!-- Your Content Here -->
            </div>
        </li>
    </ul>  

Pada kode diatas dapat kita lihat, dalam tutorial kali ini untuk membuat tab responsive kita menggunakan <input type="radio" name="tabs" id="tab2">,
Dalam input tersebut kita menggunakan atribut id yang akan kita beri css

.tabs {
    width: 650px;
    float: none;
    list-style: none;
    padding: 0;
    margin: 75px auto;
}
.tabs li {
    display: block;
}
.labels:after {
    content: '';
    display: table;
    clear: both;
}
.tabs label {
    display: inline-block;
    float: left;
    padding: 10px 20px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: normal;
    background: #5E9C00;
    cursor: pointer;
}
.tabs label:hover {
    background: #3498db;
}
.tab-content {
    display: none;
    width: 100%;
    padding: 15px;
    border:1px solid #ccc;
    border-top: 10px solid #08C;
    background-color:#ffffff;
}
.tabs input[type=radio] {
    display:none;
}
[id^=tab]:checked ~ div[id^=tab-content] {
    display: block;
}
[id^=tab]:checked ~ [id^=label]  {
    background: #08C;
    color: white;
}

 Untuk mempercantik tampilannya , kita beri css pada body

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  background: #F6703A;
  font-size:18px;
  line-height: 32px;
  word-wrap:break-word !important;
  font-family: 'Open Sans', sans-serif;
  }

 Demo Download