JSFiddle - React, Tailwind, and code Playground
by Lalji Tadhani
HTML
<div>
<div class="items">
<a href="#">
<img class="img-responsive" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/book-512.png" style="height:130px;" />
<p style="color:white; text-align:center">Shaman King</p>
</a>
<a href="#">
<img class="img-responsive" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/book-512.png" style="height:130px;" />
<p style="color:white; text-align:center">Limit</p>
</a>
<a href="#">
<img class="img-responsive" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/book-512.png" style="height:130px;" />
<p style="color:white; text-align:center">Death Note</p>
</a>
<a href="#">
<img class="img-responsive" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/book-512.png" style="height:130px;" />
<p style="color:white; text-align:center">Seraph of the End</p>
</a>
<a href="#">
<img class="img-responsive" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/book-512.png" style="height:130px;" />
<p style="color:white; text-align:center">One-Punch Man</p>
</a>
</div>
<div style="display:flex; justify-content:space-evenly; background-color:#4C8C9E">
<a href="#">
<img class="img-responsive" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/book-512.png" style="height:130px;" />
<p style="color:white; text-align:center">All You Need Is Kill</p>
</a>
<a href="#">
<img class="img-responsive" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/book-512.png" style="height:130px;" />
<p style="color:white; text-align:center">Fullmetal Alchemist</p>
</a>
<a href="#">
<img class="img-responsive" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/book-512.png" style="height:130px;" />
<p style="color:white; text-align:center">Vampire Knight</p>
</a>
<a href="#">
<img...
CSS
.items {
display: flex;
justify-content: space-evenly;
background-color: #4C8C9E;
flex-wrap:wrap;
}