JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Mapa_do_Brasil_com_a_Bandeira_Nacional.png"/></a>
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Mapa_do_Brasil_com_a_Bandeira_Nacional.png"/></a>
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Mapa_do_Brasil_com_a_Bandeira_Nacional.png"/></a>
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Mapa_do_Brasil_com_a_Bandeira_Nacional.png"/></a>
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Mapa_do_Brasil_com_a_Bandeira_Nacional.png"/></a>
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Mapa_do_Brasil_com_a_Bandeira_Nacional.png"/></a>
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Mapa_do_Brasil_com_a_Bandeira_Nacional.png"/></a>
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Mapa_do_Brasil_com_a_Bandeira_Nacional.png"/></a>
<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/b/be/Mapa_do_Brasil_com_a_Bandeira_Nacional.png"/></a>
</div>
<div class="pagination-douts">
<a href="#"><span class="page active"></span></a>
<a href="#"><span class="page"></span></a>
</div>
CSS
.container {
width: 500px;
height: 320px;
overflow: hidden;
border: 1px solid #dbdbdb;
}
.container a img {
height: 100%;
width: 100%;
border: 1px solid green;
}
.container a {
display: block;
float: left;
height: 150px;
width: 150px;
margin-bottom: 16px;
}
.container a:nth-child(2), .container a:nth-child(3n+5) {
margin-left: 24px;
margin-right: 24px;
}
.pagination-douts {
margin-top: 20px;
}
.pagination-douts span.page {
display: block;
background-color: #868686;
width: 20px;
height: 20px;
float: left;
margin-right: 5px;
}
.pagination-douts span.page.active {
background-color: green;
}
JavaScript
$('a').click(function(event){
event.preventDefault();
});