JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<article>
    <a class="content" href="#article">
        <div class="imgWrap">
            <img src="http://i1.ytimg.com/vi/lorJ7MCbMz0/hqdefault.jpg" alt="some image "/>
        </div>
        <header>
            <span>»</span>
            <h1>Voxatron will blow you away</h1>
        </header>
        <footer>
            <time>12.05.2012</time>            
        </footer>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor nibh nec magna aliquam venenatis. Nulla lobortis aliquam neque...</p>
        <strong>Read the full story</strong>
    </a>
</article>


<article>
    <a class="content" href="#article">
        <div class="imgWrap">
            <img src="http://www.trivialtreasures.com/61-142-large/qix-game-boy.jpg" alt="some image "/>
        </div>
        <header>
            <span>»</span>
            <h1>QIX</h1>
        </header>
        <footer>
            <time>12.05.2012</time>            
        </footer>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor nibh nec magna aliquam venenatis. Nulla lobortis aliquam neque...</p>
        <strong>Read the full story</strong>
    </a>
</article>


<article>
    <a class="content" href="#article">
        <div class="imgWrap">
            <img src="http://www.jap-sai.com/Games/Qix/Qix_GB_GB_Sell.jpg" alt="some image "/>
        </div>
        <header>
            <span>»</span>
            <h1>QIX (JAP)</h1>
        </header>
        <footer>
            <time>12.05.2012</time>            
        </footer>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor nibh nec magna aliquam venenatis. Nulla lobortis aliquam neque...</p>
        <strong>Read the full story</strong>
    </a>
</article>


<article>
    <a class="content" href="#article">
        <div class="imgWrap">
            <img src="http://i1.ytimg.com/vi/lorJ7MCbMz0/hqdefault.jpg" alt="some image "/>
        </div>
        <header>
           ...

CSS

body {
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    background: #1e1e1e;
    color: #fff;
    font-size: 12px;
    padding: 20px;
    
}

article {
    vertical-align: top;
    width: 25%;
    display: inline-block;
    background: rgba(0,0,0,.8);
    padding: 15px;
    margin: 15px;
    
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
article a {
    text-decoration: none;
    color: #fff;
}
article h1 {
    position: relative;
    font-size: 22px;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
    margin: 15px 0 0;
    
-webkit-transition: all 800ms ease-out; 
   -moz-transition: all 800ms ease-out; 
        transition: all 800ms ease-out;    
}

article header {
    position: relative;
}

article header span {
    position: absolute;
    top:-13px;
    left:0;
    font-size: 50px;
    opacity: 0;
    
    -webkit-transition: all 200ms ease-out; 
      -moz-transition: all 200ms ease-out; 
           transition: all 200ms ease-out; 
}

article:hover header span {
    opacity: 1;
    
      -webkit-transition: all 400ms 200ms ease-out; 
      -moz-transition: all 400ms 200ms ease-out; 
           transition: all 400ms 200ms ease-out; 
}

article:hover h1 {
    position: relative;
    padding-left: 30px;
    -webkit-transition: all 300ms ease-out; 
   -moz-transition: all 300ms ease-out; 
        transition: all 300ms ease-out;    
}
.imgWrap {
    overflow: hidden;
    border: 1px solid #fff;
}
article .imgWrap {
    outline: 4px solid rgba(255,255,255,.2);
          -webkit-transition: all 200ms 200ms ease-out; 
      -moz-transition: all 200ms 200ms ease-out; 
           transition: all 200ms 200ms ease-out; 
}

article:hover .imgWrap {
    outline: 4px solid rgba(255,255,255,1);
} 

footer {
    margin: 0 0 15px;
   ...