JSFiddle - React, Tailwind, and code Playground

by davestein

HTML

<ul id="modular-projects-width" class="cfix project-list expandable">
  <li id="project-cover-703620" class="left project-cover project-cover-703620 first-in-row">
  <a id="project-image-703620" class="project-image cfix" href="/53825/703620/photography/editorial">
    
  <!-- start cover effect spans -->
  <span class="project-image-dummy display-block project-image-image-overlay constrain-to-image overflow-hidden">
    
  </span>
  <span class="project-image-dummy display-block project-image-color-overlay constrain-to-image"></span>
  <span class="project-image-dummy display-block project-image-stroke constrain-to-image"></span>
  <span class="project-image-dummy display-block project-image-box-shadow constrain-to-image"></span>
  <span class="project-image-dummy display-block project-image-gradient-overlay constrain-to-image"></span>
  <!-- end cover effect spans -->
    
  <span class="overflow-hidden project-image-inner display-block">
    <img src="http://behance.vo.llnwd.net/profiles8/1029505/projects/4845529/3e428ee6f1acef3a9ed87475a9864630.jpg" class="project-image-off">
    <span class="project-info-dummy constrain-to-image display-block"></span>
  </span>
  
</a> <!-- .project-image -->

<div class="project-title-wrap overflow-hidden constrain-to-image">
  <a class="project-title" href="/53825/703620/photography/editorial">Editorial</a>
</div>

<div class="project-description constrain-to-image">Photo shoot for Michael Barney in Silver Lake California.</div>
<div class="project-fields constrain-to-image">Photography</div>
<div class="project-published constrain-to-image">2012</div>
</li><li id="project-cover-480147" class="left project-cover project-cover-480147">
  <a id="project-image-480147" class="project-image cfix" href="/53825/480147/photography/streets-of-paris">
    
  <!-- start cover effect spans -->
  <span class="project-image-dummy display-block project-image-image-overlay constrain-to-image overflow-hidden">
    
  </span>
  <span...

CSS

html{color:#000;background:#fff}legend{color:#000}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,ul,li,ol,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}abbr,acronym,address,caption,cite,code,dfn,em,strong,th,var,h1,h2,h3,h4,h5,h6{font-style:normal;font-weight:normal;font-variant:normal}input,textarea,select,optgroup,option,button{margin:0;padding:0;font-size:100%;background:#fff}input,textarea,select,optgroup,option,button{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;*font-size:100%}body{line-height:1}ol,ul,li{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left}sup{vertical-align:text-top}sub{vertical-align:text-bottom}html{height:100%;overflow:auto}body,.default-font{font:normal normal normal 12px/16px "Helvetica Neue",Helvetica,Arial,sans-serif}body,.default-color{color:#3b3b3b}.default-font-weight{font-weight:normal}body,.default-background-color{background-color:#fff}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:'Bitstream Vera Sans Mono','Courier New',Courier,monospace;font-size:11px}h1,h2,h3,h4,h5,h6{margin:0;font-weight:bold}h1{font-size:36px;line-height:45px}h2{font-size:24px;line-height:30px}h3{font-size:18px;line-height:22px}h4{font-size:16px;line-height:20px}h5{font-size:14px;line-height:18px}h6{font-size:12px;line-height:16px}.form-text,.form-textarea,textarea{padding:6px;border:1px
solid #acacac;background-color:#fff;color:#3b3b3b;font-family:'Helvetica...