JSFiddle - React, Tailwind, and code Playground

by zerippe

HTML

<ul>
    <li>
        <div class="content" style="background-image:url(https://lh4.googleusercontent.com/-FqLzgYGdkTM/U0OKugqjx9I/AAAAAAAAIpY/-5Bgo7A0-wQ/s300/nexus5.png)">
            <div class="title">title</div>
            <a class="link" href="" title="">test</a>
        </div>
    </li>
    <li>
        <div class="content" style="background-image:url(https://lh4.googleusercontent.com/-FqLzgYGdkTM/U0OKugqjx9I/AAAAAAAAIpY/-5Bgo7A0-wQ/s300/nexus5.png)">
            <div class="title">title</div>
            <a class="link" href="" title="">test</a>
        </div>
    </li>
    <li>
        <div class="content" style="background-image:url(https://lh4.googleusercontent.com/-FqLzgYGdkTM/U0OKugqjx9I/AAAAAAAAIpY/-5Bgo7A0-wQ/s300/nexus5.png)">
            <div class="title">title</div>
            <a class="link" href="" title="">test</a>
        </div>
    </li>
    <li>
        <div class="content" style="background-image:url(https://lh4.googleusercontent.com/-FqLzgYGdkTM/U0OKugqjx9I/AAAAAAAAIpY/-5Bgo7A0-wQ/s300/nexus5.png)">
            <div class="title">title</div>
            <a class="link" href="" title="">test</a>
        </div>
    </li>
    <li>
        <div class="content" style="background-image:url(http://lh6.ggpht.com/-Cro2EGMfsnA/Trpv9A87eZI/AAAAAAAAA6g/xr3HVvGWn8g/s300/2011-11-09_21.03.40.png)">
            <div class="title">title</div>
            <a class="link" href="" title="">test</a>
        </div>
    </li>
</ul>

CSS

ul{
    margin: 0;
    padding: 0;
    display: -webkit-box;
    -webkit-flex-flow: row wrap;
    justify-content: flex-start;
    display: flex;
}
li{
    /*ebkit-box-flex: 1;*/
    flex: 1 calc(100% / 3);
    list-style: none;
}
li .content{
    margin: 5px;
    position: relative;
    height: 80px;
    background: #eee no-repeat 50% 50%;
    background-size: cover;
    border: 1px solid #555;
    border-radius: 5px 5px 0 0;
}
li .title{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 5px 0;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
}
li .link{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}