Elegant Tabs

HTML, CSS

by Ovi Stof

HTML

<div class="tab_div">
  <ol class="tab_lst" id="tab_03">
    <li>
      <a class="tab_contin">
        <i class="fa fa-cc-paypal"></i>Option 3.1 <span>Some text...</span>
      </a>
    </li>
    <li>
      <a class="tab_contin">
        <i class="fa fa-cc-paypal"></i>Option 3.2 <span>Some text...</span>
      </a>
    </li>
    <li>
      <a class="tab_contin">
        <i class="fa fa-cc-paypal"></i>Option 3.3 <span>Some text...</span>
      </a>
    </li>
  </ol>
  <ol class="tab_lst" id="tab_02">
    <li>
      <a class="tab_contin">
        <i class="fa fa-cc-mastercard"></i>Option 2.1 <span>Some text...</span>
      </a>
    </li>
    <li>
      <a class="tab_contin">
        <i class="fa fa-cc-mastercard"></i>Option 2.2 <span>Some text...</span>
      </a>
    </li>
    <li>
      <a class="tab_contin">
        <i class="fa fa-cc-mastercard"></i>Option 2.3 <span>Some text...</span>
      </a>
    </li>
  </ol>
  <ol class="tab_lst" id="tab_01">
    <li>
      <a class="tab_contin">
        <i class="fa fa-cc-visa"></i>Option 1.1 <span>Some text...</span>
      </a>
    </li>
    <li>
      <a class="tab_contin">
        <i class="fa fa-cc-visa"></i>Option 1.2 <span>Some text...</span>
      </a>
    </li>
    <li>
      <a class="tab_contin">
        <i class="fa fa-cc-visa"></i>Option 1.3 <span>Some text...</span>
      </a>
    </li>
  </ol>
  <ul class="taburi">
    <li class="tab"><a href="#tab_03" class="tab_lnk">Tab 3</a></li>
    <li class="tab"><a href="#tab_02" class="tab_lnk">Tab 2</a></li>
    <li class="tab"><a href="#tab_01" class="tab_lnk">Tab 1</a></li>
    <!-- Omitting the end tag is valid HTML and removes the space in-between inline blocks. -->
  </ul>
</div>
<p style="text-align:right;"><a href="https://codepen.io/infuzzione/pen/VjJbbB" target="_blank"> Sursa <i class="fa fa-external-link"></i></a></p>

CSS

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
body {
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #eee;
}
.fa {font-size:3em;padding: 0 10px 0 0;height:50px;float:left;}
.tab_div {
  position: relative;
  margin: 20px auto 10px;
  width: 800px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.07);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.07);
}

.taburi {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 9px 12px 0;
  text-align: left;
  direction: rtl;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  border-radius: 3px 3px 0 0;
}

.tab,
.tab_lst:target:first-of-type ~ .taburi > .tab:first-child ~ .tab,
.tab_lst:target:nth-of-type(2) ~ .taburi > .tab:nth-child(2) ~ .tab,
.tab_lst:target:last-of-type ~ .taburi > .tab:last-child ~ .tab {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-top: 3px;
  line-height: 36px;
  font-weight: normal;
  color: #999;
  background: #fcfcfc;
  border: solid #ddd;
  border-width: 1px 1px 0;
  border-radius: 5px 5px 0 0;
  padding-bottom: 0;
  bottom: auto;
}

.tab > .tab_lnk,
.tab_lst:target:first-of-type ~ .taburi > .tab:first-child ~ .tab > .tab_lnk,
.tab_lst:target:nth-of-type(2) ~ .taburi > .tab:nth-child(2) ~ .tab > .tab_lnk,
.tab_lst:target:last-of-type ~ .taburi > .tab:last-child ~ .tab > .tab_lnk {
  margin: 0;
  border-top: 0;
}

.tab + .tab {
  margin-right: -1px;
}

.tab:last-child,
.tab_lst:target:first-of-type ~ .taburi > .tab:first-child,
.tab_lst:target:nth-of-type(2) ~ .taburi > .tab:nth-child(2),
.tab_lst:target:last-of-type ~ .taburi > .tab:last-child {
  bottom: -1px;
  margin-top: 0;
  padding-bottom: 2px;
  line-height: 34px;
  font-weight: bold;
  color: #555;
  background: white;
  border-top: 0;
}

.tab:last-child > .tab_lnk,
.tab_lst:target:first-of-type ~ .taburi > .tab:first-child >...