JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<body>
<div class="db_ass no-print work on" id="db_ass">
    <div class="dte_cover">
        <span class="gear"></span><span class="eye"><i></i>
        </span>
    </div>
<div class='tooltip l static-tooltip'>
    Jangan lupa untuk menambahkan setidaknya satu karakter spasi sebelum kode emotikon. Jika tidak begitu, emotikon tidak akan bisa terbaca. Ini demi mencegah agar karakter-karakter “bukan emotikon” yang muncul dari kode atau kesalahan penulisan tidak berubah menjadi emotikon · <a class='close' href='#'>ok</a>
        </div>   
</div>
    


    <img class="emo" src="" alt=":)"/>
</body>

CSS

.db_ass{width:20px;height:20px;position:absolute;top:60px;left:314px;background-color:#888;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.6);-moz-box-shadow:0 1px 3px rgba(0,0,0,.6);box-shadow:0 1px 3px rgba(0,0,0,.6);background-color:#888}

      .db_ass .gear{display:block;position:absolute;top:-2px;bottom:-2px;left:6px;width:8px;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAACCAMAAABSSm3fAAAAD1BMVEWampp1dXWwsLB9fX1cXFyY5ZzxAAAAGklEQVR42g3FsQEAAAjCMJD+f7PNkpCT0ak8AU0AJ9YjcPEAAAAASUVORK5CYII=) repeat-y 50% 0}

      .db_ass .eye{cursor:pointer;display:block;overflow:hidden;background-color:#fff;position:absolute;top:4px;right:3px;bottom:4px;left:3px;border:2px solid #888;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.4),inset 0 1px 2px rgba(0,0,0,.4);-moz-box-shadow:0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.4),inset 0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.4),inset 0 1px 2px rgba(0,0,0,.4);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box}

      .db_ass .eye i{display:block;width:6px;height:6px;background-color:#333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:1px 0 0 4px;position:relative}

      .db_ass.on .eye i{-webkit-animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s;-moz-animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s;-ms-animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s;-o-animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s;animation:a1 5s linear infinite alternate,a2 7s linear infinite alternate 5s}

      .db_ass .eye...

JavaScript

$(document).ready(function() {
     $('.emo').click(function() {
         $('.tooltip').animate({width:"200px"}, 4000);
         $('.db_ass').css({position:'fixed'}).animate({top:"50%"}, 4000);
         $(this).hide();$('.db_ass.on .tooltip').show();
         $(this).hide();$('.emo').show();
     });

 $('.close').click(function() {
          $('.db_ass').css({position:'absolute'}).animate({top:"60px"}, 3400);
          $(this).hide();$('.db_ass.on .tooltip').hide();
     $(this).hide();$('.close').show();
     });
});