JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<ul id="column1" class="column">
    <li class="widget red">
        <div class="widget-head">
            <h3>Widget title</h3>
        </div>
        <div class="widget-content">
            <p>The content...</p>
        </div>
    </li>
    <li class="widget blue">
        <div class="widget-head">
            <h3>Widget title</h3>
        </div>
        <div class="widget-content">
            <p>The content...</p>
        </div>
    </li>
</ul>

CSS

/* Reset */
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol{margin:0;padding:0;list-style:none;border:none;}
/* END Reset */

body {font-size:0.8em; font-family:Arial,Veranda,Sans-Serif,background:#000;}
a{color:white;}

/* Colours */  
.color-yellow {background:#f2bc00;}  
.color-red    {background:#dd0000;}  
.color-blue   {background:#148ea4;}  
.color-white  {background:#dfdfdf;}  
.color-orange {background:#f66e00;}  
.color-green  {background:#8dc100;}  
.color-yellow h3,.color-white h3,.color-green h3  
    {color:#000;}  
.color-red h3,.color-blue h3,.color-orange h3  
    {color:#FFF;}  
/* End Colours */ 

/* Head section */
#head {
    background: #000 ulr(img/head-bg.png) repeat-x;
    height: 100px;
}
#head h1 {
    line-height:100px;
    color:#FFF;
    text-align:center;
    background: url(img/inettuts.png) no-repeat center;
    text-indent: -9999em;
}
/* End head section */

/* Columns section */