JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<div><div><div><div><div><div><div><div><div><div>    
</div></div></div></div></div></div></div></div></div></div>

CSS

body {overflow: hidden;}
body > div {position: absolute; top: 30%; left: 45%;margin-left:-50px;}
div {
    width: 100px; height: 100px;
    position: relative;
    background: rgba(0,40,90,0.25);
    rotate(5deg); -moz-transition: all 3s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    border-radius: 10%;
}
div:after {position: absolute; top: 0; left: 10px; content: "Buy Now"; text-align: center; font-weight: bold; font-family: sans-serif; color: #fff; text-shadow: -2px 2px 2px rgba(100,100,100,0.7); width: 100px;}
div div {width: 115%; height: 115%;}

div:hover {-moz-transform: rotate(180deg); -webkit-transform: rotate(180deg);}