JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<section class='galeria'>
  <input type="radio" id="uno" value="1" name="tractor" checked='checked' />    
<input type="radio" id="dole" value="2" name="tractor" />      
<input type="radio" id="tele" value="3" name="tractor" />
  <article class='card una'>
    <h2 class='entypo-tag'>Three Labels</h2>
      <p>Three Labels for each Input.<br/>
One for go back,<br/>
Another for go ahead,<br/>
The Last for recover it.</p>
    <ul class='footer'>
      <li class='entypo-bell'></li>
      <li class='entypo-mic'></li>
      <li class='entypo-megaphone'></li>
    </ul>
    <label for='dole' class='entypo-left-bold otra'></label>
    <label for='tele' class='entypo-right-bold otra'></label>
    <label for='uno' class='entypo-arrows-ccw afin'></label>  
  </article>
  
  <article class='card dos'>
    <h2 class='entypo-feather'>One Input to rule them all</h2>
      <p>In the Land of the Good Taste<br/>
where the Performers dwell.<br/>
One Input to rule them all,<br/>
One Input to find them.</p>
    <ul class='footer'>
      <li class='entypo-network'></li>
      <li class='entypo-qq'></li>
      <li class='entypo-picasa'></li>
    </ul>
    <label for='tele' class='entypo-left-bold otra'></label>
    <label for='uno' class='entypo-right-bold otra'></label>
    <label for='dole' class='entypo-arrows-ccw afin'></label>  
  </article>
  
  <article class='card tres'>
    <h2 class='entypo-address'>In the Land of Styles</h2>
      <p>One Input to bring them all<br/>
        and in the Html bind them<br/>
        In the Land of Styles<br/>
        where the Css is the King.</p>
    <ul class='footer'>
      <li class='entypo-ccw'></li>
      <li class='entypo-arrows-ccw'></li>
      <li class='entypo-cw'></li>
    </ul>
    <label for='uno' class='entypo-left-bold otra'></label>
    <label for='dole' class='entypo-right-bold otra'></label>
    <label for='tele' class='entypo-arrows-ccw...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,300,700|Great+Vibes);
@import url(http://weloveiconfonts.com/api/?family=entypo);
*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border: 0 none;position: relative;}
[class*="entypo-"]:before {font-family: 'entypo', sans-serif; display: inline-block; margin-right: .5rem;}

html, body  {
  background: #004050;
  width: 100%;
  height: 100%;
  font-family: lato;
  font-weight: 300;
  overflow-x: hidden;
}
h1, h1 a {
  font-size: 6vw;
  font-weight: 300;
  color: #00262F;
  text-align: center;
  text-decoration: none;
}
h1 a:hover {color: #0D757D;}
body > p {
  color: #00262F;
  font-size: 3vw;
  text-align: center;
  
}
.galeria {
  margin: 2vh auto 0;
  width: 80vw;
  transform-style: preserve-3d;
}
.galeria:before {
  content: '';
  padding-top: 56.25%;
  display: inline-block;
  width: 0;
}
.card {
  background-size: 2px 2px, cover;
  background-repeat: repeat, none;
  background-position: 0 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 2rem rgba(0,0,0,.5);
  border-radius: 3px;
  font-family: 'Great Vibes';
}
.una {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAAEFsT2yAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFElEQVR4nGNhYGBwYIET////ZwAAETIDym2lzEcAAAAASUVORK5CYII=), url(http://2.bp.blogspot.com/-Kd55Z83gyvM/UpD8A6qj6CI/AAAAAAAAH20/eV8YvYCDAvE/s1600/mult-lab1.jpg);
}
.dos {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAAEFsT2yAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFElEQVR4nGNhYGBwYIET////ZwAAETIDym2lzEcAAAAASUVORK5CYII=), url(http://2.bp.blogspot.com/-ggbrdAifJsg/UpD8BKbE3qI/AAAAAAAAH24/qJ4tw_dWvZw/s1600/mult-lab2.jpg);
}
.tres {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAAEFsT2yAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFElEQVR4nGNhYGBwYIET////ZwAAETIDym2lzEcAAAAASUVORK5CYII=),...