JSFiddle - React, Tailwind, and code Playground

by aasthatuteja

HTML

<div id="main">
    <div class="_hd"> <a href="#">
    <img src="http://i.imgur.com/MjrzFED.png" />
    <b class="hd_b"> Shows </b>
</a>

    </div>
    <div class="_hd"> <a href="#">
    <img src="http://i.imgur.com/MjrzFED.png" />
    <b class="hd_b"> Shows </b>
</a>

    </div>
    <div class="_hd"> <a href="#">
    <img src="http://i.imgur.com/MjrzFED.png" />
    <b class="hd_b"> Shows </b>
</a>

    </div>
    <div class="_hd"> <a href="#">
    <img src="http://i.imgur.com/MjrzFED.png" />
    <b class="hd_b"> Shows </b>
</a>

    </div>
</div>

CSS

#main{
    width:500px;
    margin: 0 auto;
}

/* Center 4 Blocks */
 .hd_b {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    display: block;
    text-decoration: none;
}
._hd {
    margin-right: 20px;
    display: block;
    float: left;
    text-align: center;
}
._hd img {
    opacity: .85;
}
._hd a:hover img {
    opacity: 1;
}