JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row"> 
	<div class="small-3 column">
		<a href="map.html">
			<ul class="small-block-grid-3">
			<li><img class="locatebygps" src="locatebygps.gif"></li>
		<a href="enterlocation.html">	
			<li><img class="enterlocation" src="enterlocation.gif"></li>
		<a href="settings.html">
			<li><img class="settings" src="settings.gif"></li>
			</ul>
			
	</div>
			
</div>

CSS

.forum { color: white; }
    #blue { background-color: blue; }
#blue {
			width: 200px;
			height: 200px;
			background: green;

			display: inline-block;
			margin-right: 20px;
              -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
		}
#blue:hover {
			width: 200px;
			height: 200px;
			background: blue;

			display: inline-block;
			margin-right: 20px;
              -webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
    -webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
		}