JSFiddle - React, Tailwind, and code Playground

by fabiii

HTML

<body>
	<div class="eb-teaser">
		<div class="eb-btns">
			<div class="sprite"><a href="#" target="_blank"></a></div>
            <div class="sprite"><a href="#" target="_blank"></a></div>
            <div class="sprite"><a href="#" target="_blank"></a></div>
            <div class="sprite-last"><a href="#" target="_blank"></a></div>
			<div style="clear:both;"></div>
		</div>
	</div>
</body>

CSS

body{margin: 0;}
.eb-teaser{max-height: 320px;background-color: #e6e6e6;}
.eb-btns{width: 98%;margin:0 auto;text-align: center;padding: 10px 0 10px 0;}

div.sprite {width: 20%;height: 0;padding-bottom: 20%;margin-right: 1%;float: left;}
div.sprite-last {width: 20%;height: 0;padding-bottom: 20%;margin-right: 0%;float: left;}

div.eb-btns a{width: 100%;height: 0;padding-bottom: 100%;background-image: url(http://dummyimage.com/300x300/00d8f5/ffffff.gif);background-position: 0 0;background-size: 100%;display:block;}

div.eb-btns a:hover{background-image: url(http://dummyimage.com/300x300/ffd8f5/ffffff.gif);}