JSFiddle - React, Tailwind, and code Playground

Click on either tab

by Jennifer Perrin

HTML

<h2 class="title-text">Click on either tab!</h2>

<div class="sidebar-tabs-menu-1">
  <input type="radio" name="sidebar-tabs-menu-1-tab" id="sidebar-tabs-menu-1-tab-1" value="sidebar-tabs-menu-1-recent" class="display-none" checked>
  <label for="sidebar-tabs-menu-1-tab-1" class="tab">
    <div class="title">Recent</div>
    <div class="reveal">
      
      <div class="lay-frame">
        <div class="underlay">
          <h2>Hover me!</h2>
        </div>
        <div class="overlay">
          <div class="readMore">
            <a href="#">
              Read more
            </a>
            <div class="arrow">
              <div class="arrow-mask"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-frame">
        <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div>
        <div><p>Author / June 19, 2014</p></div>
        <div><div class="border-bottom"></div></div>
      </div>
      
      <div class="lay-frame">
        <div class="underlay">
          <h2>Hover me!</h2>
        </div>
        <div class="overlay">
          <div class="readMore">
            <a href="#">
              Read more
            </a>
            <div class="arrow">
              <div class="arrow-mask"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-frame">
        <div><h2><a href="#">Lorem ipsum dolor sit amet, consectetur.</a></h2></div>
        <div><p>Author / June 19, 2014</p></div>
        <div><div class="border-bottom"></div></div>
      </div>
      
    </div>
  </label>
  
  <input type="radio" name="sidebar-tabs-menu-1-tab" id="sidebar-tabs-menu-1-tab-2" value="sidebar-tabs-menu-1-popular" class="display-none">
  <label for="sidebar-tabs-menu-1-tab-2" class="tab">
    <div class="title not-first">Popular</div>
    <div class="reveal">
      
      <div class="lay-frame">
        <div class="underlay">
          <h2>Hover me!</h2>
        </div>
       ...

CSS

/* GENERAL RULES (REQUIRED) */
* {box-sizing:border-box;transition:all 0.3s;-webkit-transition:all 0.3s;color:#1d1f20;font-family: 'Roboto', sans-serif;}
.display-none {display:none;}

/* GENERAL RULES (OPTIONAL) */
body {margin:0;background-color:#1d1f20;}
h2 {font-weight:300;}
.title-text {text-align:center;font-size:40px;color:#EEE;}
.sidebar-tabs-menu-1 {position:relative;margin:40px auto;width:275px;}

/* TAB RULES */
.sidebar-tabs-menu-1 .tab {position:absolute;}
.sidebar-tabs-menu-1 .tab .title {cursor:pointer;position:absolute;padding:18px 10px;background-color:#EEE;border-bottom:3px solid #E0346A;width:50%;z-index:1;text-align:center;}
.sidebar-tabs-menu-1 .tab .title.not-first {right:0;}

/* CHANGE TABS */
.sidebar-tabs-menu-1 input[type="radio"]:checked + label > .title {background-color:#E0346A;color:#EEE;}
.sidebar-tabs-menu-1 input[type="radio"]:checked + label > .reveal .lay-frame div {transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1;z-index:1;}
.sidebar-tabs-menu-1 input[type="radio"]:checked + label > .reveal .text-frame div {transform:translateX(0px);-webkit-transform:translateX(0px);opacity:1;z-index:1;}

/* REVEALED RULES */
.sidebar-tabs-menu-1 .reveal {margin:58px 0 0 0;overflow:hidden;}

/* LAY RULES */
.sidebar-tabs-menu-1 .reveal .lay-frame {cursor:pointer;overflow:hidden;margin-top:30px;margin-bottom:20px;width:100%;height:160px;}
.sidebar-tabs-menu-1 .reveal .lay-frame div {opacity:0;z-index:0;transform:translateX(200%);-webkit-transform:translateX(200%);}
.sidebar-tabs-menu-1 .reveal .underlay {position:relative;float:left;width:100%;height:100%;box-shadow:0 0 160px #444 inset;}
.sidebar-tabs-menu-1 .reveal .underlay h2 {text-align:center;color:#EEE;line-height:62px;}
.sidebar-tabs-menu-1 .reveal .overlay {position:relative;width:100%;height:100%;color:#EEE;background-color:rgba(0,0,0,0.35);z-index:1;top:100%;opacity:0;}

/* LAY HOVER RULES */
.sidebar-tabs-menu-1 .reveal .underlay:hover + .overlay...