JSFiddle - React, Tailwind, and code Playground

by andrelaszlo

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/hover.css/2.0.2/css/hover-min.css">
<div class="wrapper hvr-wobble-horizontal"><div class="emoticon">:(</div></div>
<div class="wrapper hvr-bounce-in"><div class="emoticon">:|</div></div>
<div class="wrapper hvr-wobble-vertical"><div class="emoticon">:)</div></div>

CSS

body {
    font-size: 3em;
}
.wrapper {
    float: left;
    font-size: 2em;
    text-align: center;
    width: 2em;
    line-height: 2em;
    word-spacing: 0px;
    height: 2em;
    font-family: sans-serif;
    cursor: pointer;
}
    
.emoticon {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}