JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div class="kotak gotop">Go Top</div>
<div class="kotak goright">Go Right</div>
<div class="kotak zoom">Zoom</div>
<div class="kotak putar">Putar</div>
<div class="kotak samping-kiri-bawah">Samping</div>
<div class="kotak mengecil">Mengecil</div>

CSS

.kotak {
float:left;
width:65px;
height:60px;
border:2px solid #333;
background-color:#D3A76F;
line-height:57px;
text-align:center;
cursor:pointer;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
margin:50px 10px 0 5px;
}

.gotop:hover {
-webkit-transform:translate(0,-3em);
-moz-transform:translate(0,-3em);
-o-transform:translate(0,-3em);
}

.goright:hover {
-webkit-transform:translate(3em,0);
-moz-transform:translate(3em,0);
-o-transform:translate(3em,0);
}

.putar:hover {
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
}

.samping-kiri-bawah:hover {
-webkit-transform:translate(-3em,1em);
-moz-transform:translate(-3em,1em);
-o-transform:translate(-3em,1em);
}

.zoom:hover {
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
}

.mengecil {
margin:55px 0 0 185px;
}

.mengecil,.mengecil:hover {
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
-webkit-border-radius:1em;
-moz-border-radius:1em;
border-radius:1em;
border-color:#333;
}

.mengecil:hover {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
border-color:#06F;
}