JSFiddle - React, Tailwind, and code Playground

HTML

<article class="project">
  <div class="thumbnail view">
    <img src="http://lorempixel.com/output/people-q-c-292-292-9.jpg" />
    <section class="description">
      <hgroup>
        <h2>Title</h2>
        <h3>Identity, Illustration, Web</h3>
      </hgroup>
      <p>Description of project.</p>
      <a class="screenshot single-image" href="http://lorempixel.com/output/nightlife-q-c-700-700-4.jpg"></a>
        <span><a href="http://test.com" target="_blank">Visit website</a>	<a href="http://test.com/read-more">View more</a></span>
    </section>
  </div>
</article>

CSS

body {
color: #666;
font: 11px/1.5 helvetica,arial,sans-serif;
}
a { font-weight:bold;text-decoration:none }
.project {
background: #fff;
border: 1px solid #e5e5e5;
float: left;
height: 292px;
margin: 0 20px 20px 0;
overflow: hidden;
padding: 3px;
position: relative;
top: auto;
width: 292px;
}
.project .thumbnail {
   float: left;
   overflow: hidden;
   cursor: default;
   background: #f4f3f1;
    width:292px;
    height:292px;
}
.project .description {
   width: 252px;
   height:252px;
   position: absolute;
   top: 3px;
   left: 3px;
   padding:20px;
}
.project .description span a {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 150ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 150ms;
background: #fff;
border: 1px solid #dedede;
color: #222 !important;
display: block;
float: left;
margin: 10px 10px 0 0;
padding: 10px 15px;
}
.screenshot {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 150ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 150ms;
background: url("http://i.imgur.com/fEoN3s9.png") no-repeat scroll 0 0 transparent;
background-size: 37px 46px;
display: block;
height: 46px;
position: absolute;
right: 20px;
top: 20px;
width: 37px;
}
.thumbnail img {
   display: block;
   position: relative;
}
.thumbnail h2 {
   margin-bottom:5px;
   padding-bottom:0;
}
.project .description h3 {
   border-bottom:1px solid #dedede;
   color: #666;
   font-size:1em;
   margin-bottom: 15px;
   padding-bottom: 15px;
}
.project .description a {
   color: #ea641c;
}
.view img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view .description {
   -ms-filter: "progid:...