JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div id="gal">
  <nav class="galnav">
    <ul>
      <li>
        <input type="radio" name="btn" value="one" checked="checked"/>
        <label for="btn"></label>
        <figure>
          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/01_Fabio_Basile.jpg"/>
          <figcaption>
            <h4>Fabio Basile</h4>
              <nav role='navigation'>
                <p>iPhone 6 Infinity</p>
                <ul>
                  <li><a href="http://dribbble.com/toxinide" class="entypo-dribbble"></a></li>
                  <li><a href="https://twitter.com/fffabs" class="entypo-twitter"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="two"/>
        <label for="btn"></label>
         <figure class="entypo-forward">
          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/08_Brian_Miller.jpg"/>
          <figcaption>
            <h4>Brian Miller</h4>
              <nav role='navigation'>
                <p>TypeTi.me</p>
                <ul>
                  <li><a href="http://dribbble.com/BMDG" class="entypo-dribbble"></a></li>
                  <li><a href="https://twitter.com/BMDG" class="entypo-twitter"></a></li>
                </ul>
              </nav>  
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="three"/>
        <label for="btn"></label>
        <figure class="entypo-forward">
          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/05_Nicolas_Quod.jpg"/>
          <figcaption>
            <h4>Nicolas Quod</h4>
              <nav role='navigation'>
                <p>Iphone 6 - Notification - iOS 7</p>
                <ul>
                  <li><a href="http://dribbble.com/NicolasQuod" class="entypo-dribbble"></a></li>
                  <li><a...

CSS

/*
 radio click through #2
 Hornebom / 2013-10-23
 MIT licensed
 http://hornebom.com/
*/

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);
*, *:before, *:after {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#gal {
  position:relative;
  width:600px;
  height:300px;
  margin:0 auto;
  top:100px;
  background:white;
  -webkit-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -moz-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:   translate3d(0, 0, 0);
  -ms-transform:    translate3d(0, 0, 0);
  -o-transform:     translate3d(0, 0, 0);
  transform:        translate3d(0, 0, 0);
}
#gal:after {
  content:'';
  position:absolute;
  bottom:24px;
  right:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.35);
  z-index:3;
}
#gal ul {list-style-type:none;}
input[type="radio"], input[type="radio"] + label {
  position:absolute;
  bottom:15px;
  display:block;
  width:20px;
  height:20px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  cursor:pointer;
}
input[type="radio"] {
  opacity:0;
  z-index:9;
}
input[value="one"], input[value="one"] + label {left:20px;}
input[value="two"], input[value="two"] + label {left:128px;}
input[value="three"], input[value="three"] + label {left:236px;}
input[value="four"], input[value="four"] + label {left:344px;}
input[value="five"], input[value="five"] + label {left:452px;}
input[value="six"], input[value="six"] + label {right:20px;}
input[type="radio"] + label {
  background:rgba(255,255,255,0.35);
  z-index:7;
  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 ...