JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="singleResult">
    <div class="partNumCont">
        <label >Part #:</label>
        <span>00-00-00-00-00</span>
    </div>
    <div class="grid">
        <div class="col-1-3">
        <label>Convolutions</label>
            <span>3</span>
        </div>
        <div class="col-1-3">
        <label>AntiSquirm™</label>
            <span>Yes</span>
        </div>
        <div class="col-1-3">
        <label>Vaccubands™</label>
            <span>No</span>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="singleResult">
    <div class="partNumCont">
        <label >Part #:</label>
        <span>00-00-00-00-00</span>
    </div>
    <div class="grid">
        <div class="col-1-3">
        <label>Convolutions</label>
            <span>3</span>
        </div>
        <div class="col-1-3">
        <label>AntiSquirm™</label>
            <span>Yes</span>
        </div>
        <div class="col-1-3">
        <label>Vaccubands™</label>
            <span>No</span>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="singleResult">
    <div class="partNumCont">
        <label >Part #:</label>
        <span>00-00-00-00-00</span>
    </div>
    <div class="grid">
        <div class="col-1-3">
        <label>Convolutions</label>
            <span>3</span>
        </div>
        <div class="col-1-3">
        <label>AntiSquirm™</label>
            <span>Yes</span>
        </div>
        <div class="col-1-3">
        <label>Vaccubands™</label>
            <span>No</span>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="singleResult">
    <div class="partNumCont">
        <label >Part #:</label>
        <span>00-00-00-00-00</span>
    </div>
    <div class="grid">
        <div class="col-1-3">
        <label>Convolutions</label>
            <span>3</span>
        </div>
        <div class="col-1-3">
        <label>AntiSquirm™</label>
            <span>Yes</span>
        </div>
        <div...

SCSS

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:border-box;}

label {
    color:red;
    font-weight:bold;
}

.singleResult {
    width:47%;
    background:#f7f7f7;
    background: #444;
    background: #5e5e5e; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #5e5e5e 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#5e5e5e), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #5e5e5e 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #5e5e5e 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #5e5e5e 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(135deg, #5e5e5e 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border:1px solid #e3e3e3;
    padding:0px;
    border-radius:10px;
    overflow:hidden;
    margin:10px 5px;
    float:left;
    &:hover {
            box-shadow:0 0 10px #e3e3e3;
        }
        .partNumCont {
            padding:0px;
            padding-top: 0;
            text-align:center;
            text-shadow:1px 1px 0 black;
            label {
                font-size:15px;
                padding:0;
                margin:0;
                padding:5px;
                font-weight:bolder;
            }
            span {
                padding:5px;
                font-size:27px;
                display:block;
                color:white;
                text-shadow:1px 1px 0 white;
                
            }
        }
}

.clear {
    clear:both;
}

.grid {
    width:100%;
    div {
        width:33.333%;
        float:left;
        background:red;
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top,...