JSFiddle - React, Tailwind, and code Playground

HTML

<span id="foo">
    <span class="popup"></span>
</span>

CSS

body {
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}

#foo {
 margin:50px;
 display: inline-block;
 background:red;
 color: #000;
 font-size: 100px;
 width:20px
 height:200px;  
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}

#foo:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

#foo:before {
 content: 'OO';
}

#foo .popup {
 display: none;        
}