JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div class="main">
    <div class="one">
    <div class="data"></div>
    <div class="tag">
        <h4 class="supp">Support</h4>
    </div>
   </div>
    <div class="two">
    <div class="data2"></div>
    <div class="tag">
        <h4>Premium Design</h4>
    </div>
    </div>
    <div class="three">
    <div class="data3"></div>
    <div class="tag">
        <h4 class="fea">Features</h4>
    </div>
    </div>
    <div class="four">
    <div class="data4"></div>
    <div class="tag">
        <h4>Gudie Included</h4>
    </div>
    </div>
     <div class="five">
    <div class="data5"></div>
    <div class="tag">
        <h4>Mobile Supported</h4>
    </div>
    </div>
</div>

CSS

.main
{
    width;100%;
    margin:0;
}
.one
{
    width:40%;
    height:250px;
    position;relative;
   
}
.two
{
    width:40%;
    height:250px;
    position;relative;
    margin-top:20px;
}
.three
 {
    width:40%;
    height:250px;
    position;relative;
    
    margin-top:20px;
}
.four
{
    width:40%;
    height:250px;
    position;relative;
    
    margin-top:20px;
    
}
.five
{
    width:40%;
    height:250px;
    position;relative;
    
    margin-top:20px;
    
}
.data
{
    width:100%;
    height:215px;
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    position;relative;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
.data2
{
    width:100%;
    height:215px;
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    position;relative;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
.data3
{
    width:100%;
    height:215px;
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    position;relative;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
.data4
{
    width:100%;
    height:215px;
   background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    position;relative;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
.data5
{
    width:100%;
    height:215px;
   background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    position;relative;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
.tag
{
    height:35px;
    width:100%;
    position:relative;
    margin-top:-25px;
    background:#cccccc;
    background:-webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
    background:-webkit-linear-gradient(#eeeeee, #cccccc);
    background:-moz-linear-gradient(center top, #eeeeee 0, #cccccc 100%);
    background:-moz-gradient(center top, #eeeeee 0, #cccccc 100%);
    tex-align:center;
    
}
.supp
{
    ...