JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div class="main">
    <div class="one">
    <div class="data"></div>
    <div class="tag">
        <h6><a href="" rel="bookmark" title="">Profile</a></h6>
    </div>
   </div>
    <div class="two">
    <div class="data2"></div>
    <div class="tag">
        <h6><a href="" rel="bookmark" title="">Profile</a></h6>
    </div>
    </div>
    <div class="three">
    <div class="data3"></div>
    <div class="tag">
        <h6><a href="" rel="bookmark" title="">Profile</a></h6>
    </div>
    </div>
    <div class="four">
    <div class="data4"></div>
    <div class="tag">
        <h6><a href="" rel="bookmark" title="">Profile</a></h6>
    </div>
    </div>
</div>

CSS

.main
{
    width;100%;
    margin:0;
}
.one
{
    width:40%;
    height:250px;
    position;relative;
    float:left;
}
.two
{
    width:40%;
    height:250px;
    position;relative;
    float:left;
    margin-left:20px;
}
.three
 {
    width:40%;
    height:250px;
    position;relative;
    float:left;
    margin-top:20px;
}
.four
{
    width:40%;
    height:250px;
    position;relative;
    float:left;
    margin-top:20px;
    margin-left:20px;
}
.data
{
    width:100%;
    height:215px;
    background-color:black;
    position;relative;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
.data2
{
    width:100%;
    height:215px;
    background-color:black;
    position;relative;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
.data3
{
    width:100%;
    height:215px;
    background-color:black;
    position;relative;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
.data4
{
    width:100%;
    height:215px;
    background-color:black;
    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%);
    border-radius:10px;
}
a
{
    margin:auto;
    margin-left:42%;
    display:block;
    line-height: 30px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
}