JSFiddle - React, Tailwind, and code Playground

by juErik

HTML

<ul id="region1">
  <li>
      <div class="tile">
        <figure class="front c1"><a href="http://webfav.es">WebFaves</a></figure>
        <figure class="back c1"><a href="http://webfav.es"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>http://webfav.es</a></figure>
      </div>
  </li>
  <li>
     <div class="tile">
        <figure class="front c2"><a href="http://webfav.es">WebFaves</a></figure>
        <figure class="back c2"><a href="http://webfav.es"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>http://webfav.es</a></figure>
      </div>
  </li>
  <li>
     <div class="tile">
        <figure class="front c3"><a href="http://webfav.es">WebFaves</a></figure>
        <figure class="back c3"><a href="http://webfav.es"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>http://webfav.es</a></figure>
      </div>
  </li>
  <li>
     <div class="tile">
        <figure class="front c4"><a href="http://webfav.es">WebFaves</a></figure>
        <figure class="back c4"><a href="http://webfav.es"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>http://webfav.es</a></figure>
      </div>
  </li>
  <li>
     <div class="tile">
        <figure class="front c5"><a href="http://webfav.es">WebFaves</a></figure>
        <figure class="back c5"><a href="http://webfav.es"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>http://webfav.es</a></figure>
      </div>
  </li>  
  <li>
     <div class="tile">
        <figure class="front c6"><a href="http://webfav.es">WebFaves</a></figure>
        <figure class="back c6"><a href="http://webfav.es"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>http://webfav.es</a></figure>
      </div>
  </li>
  <li>
     <div class="tile">
        <figure class="front c7"><a href="http://webfav.es">WebFaves</a></figure>
        <figure class="back c7"><a href="http://webfav.es"><span>Lorem ipsum dolor sit amet, consectetur...

CSS

/* Crafted with love by Kristof Michiels in Antwerp in october 2015. All HTML and CSS, no JavaScript. I was inspired by David DeSandro's technique (link below) for the implementation of the flipping tiles. If you would like to use this design, feel free, but please credit me. Thank you! */

body {
  width: 875px;
  margin: 50px auto 0 auto;
  font-family: Arimo, sans-serif;
  font-size: 100%;}

h1 {
  font-size: 2.2em;
  font-weight: 700;
  color: #314140;
  letter-spacing: 0.04em;}

h1 span {
  color: #ccc;
}

h2 {
  clear: left;
  margin-bottom: 30px;
  padding-top: 5px;
  float: right;
  font-size: 1.25em;
  color: #314140;
  letter-spacing: 0.06em;}

h2.left {
  float: none;}

p {
  clear: both;
  text-align: center;
  padding-top: 25px;
  margin-bottom: 50px;}

ul {
  clear: both;}

li {
  width: 200px;
  height: 200px;
  margin-right: 25px;
  margin-bottom: 25px;
  float: left;
  position: relative;
  perspective: 800px;}

li:nth-child(4), li:nth-child(8){
  margin-right: 0;}

ul a {
  display: block;
  font-size: 1.25em;
  letter-spacing: 3px;
  text-align: center;
  width: 200px;
  height: 120px;
  color: white;
  padding-top: 80px;
  text-decoration: none;}

ul .back a {
  font-size: 0.8em;
  padding-top: 20px;
  height: 180px;}

ul .back a span {
  font-size: 1.25em;
  display: block;
  height: 140px;
  padding-left: 10px;
  padding-right: 10px;
  width: 180px;
  font-weight: 400;
  line-height: 1.45em;}

.xl a {
  height: 138px;
  padding-top: 62px;
  line-height: 32px;}

p {
  color: #ccc;
  font-size: 1.05em;}

p a {color: black;}

/* colors, colors, colors... */

#region1 .c1 {background-color: #F0AA31;}
#region1 .c2 {background-color: #CD4270;}
#region1 .c3 {background-color: #458E4B;}
#region1 .c4 {background-color: #4D92CC;}
#region1 .c5 {background-color: #EFEA42;}
#region1 .c6 {background-color: #ECB7D0;}
#region1 .c7 {background-color: #ECC374;}
#region1 .c8 {background-color: #E98B2E;}

/* kudos to David DeSandro for his card flip technique...