JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<div class="colwrapper">

<div class="col">
    <div class="reportsection">
        <a class="reportlink" href="#">
            <strong class="reporttitle">Ordninger</strong>
            <span class="reportstatus">1 av 6 godkjent av fylkesmann</span>
            <span class="reportuser"></span>
            <span class="reportdate"></span>
            <progress class="reportprogress" value="45" max="100"></progress>
        </a>
    </div>
</div>
<div class="col">
    <div class="reportsection">
        <a class="reportlink" href="#">
            <strong class="reporttitle">Prosjekter</strong>
            <span class="reportstatus">I arbeid</span>
            <span class="reportuser"></span>
            <span class="reportdate"></span>
            <progress class="reportprogress" value="0" max="100"></progress>
        </a>
    </div>    
</div>
<div class="col">
    <div class="reportsection">
        <a class="reportlink" href="#">
            <strong class="reporttitle">S-prerapport</strong>
            <span class="reportstatus">Godkjent av fylkesmann</span>
            <span class="reportuser">Ola Nordmann</span>
            <span class="reportdate">03.02.2013</span>
            <span class="reporticon">✓</span>
            <progress class="reportprogress" value="100" max="100"></progress>
        </a>
    </div>
</div>
    
</div>

CSS

@font-face{font-family:'FiendstarLightRegular';src:url(//:) format('no404'),url('http://www.udir.no/Udir/Frontend/css/type/fiendstar_light-webfont.woff') format('woff'),url('http://www.udir.no/Udir/Frontend/css/type/fiendstar_light-webfont.ttf') format('truetype'),url('http://www.udir.no/Udir/Frontend/css/type/fiendstar_light-webfont.svg#webfontOB5lTA4x') format('svg');font-weight:normal;font-style:normal}

body, html {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
}

.colwrapper {
    padding: 30px 10px;
}

.col {
    float: left;
    width: 33.33%;
    box-sizing: border-box;
    padding: 10px;
}


.reportsection {
}

.reportlink {
    position: relative;
    box-sizing: border-box;

    padding: 20px;
    
    border: 1px solid #e5e5e5;
    border-top-width: 10px;
    border-radius: 5px;
    display: block;
    
    width: 100%;
    height: 100%;
    text-decoration: none;
}
    .reportlink:hover {
        border-top-color: #f24f06;
        background: #e5e5e5; /* Old browsers */
        background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 22%, #e5e5e5 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(22%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 22%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 22%,#e5e5e5 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 22%,#e5e5e5 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 22%,#e5e5e5 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    }

.reporttitle {
    color: #000;
    font-family: "FiendstarLightRegular";
    font-size: 20px;
    font-weight: normal;
    display: block;
    margin: 10px 0...