JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
</div>
<div class="container">
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
    <a class="bluecircle" href="#">
        <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
    </a>
    <a class="bluecircle" href="#">
        <img width="150px" height="150px"...

CSS

.container {
    display: inline-block;
}

a.bluecircle {
    display: block;
    float: left;
    filter: grayscale(100%);
    height: 150px;
    position: relative;
    margin: 0px 10px 10px 40px;
    width: 150px;
}
a.bluecircle:before {
    border-radius: 150px;
	content: "";
	position: absolute;
	top: 20px;
	left: 20px;
	width: 150px;
    height: 150px;
	background: none;
    transition: background .2s linear;
}
a.bluecircle:hover:before {
	background: rgba(0, 138, 184, .5);	
}
a.bluecircle:hover {
	filter: grayscale(0%);	
}
img {
    border-radius: 150px;
    padding: 20px;
}