JSFiddle - React, Tailwind, and code Playground

by rubatong

HTML

<div id="doraemon"> 
    <div id="face"> 
        <div id="head_light"></div> 
        <div id="eyes"> 
        <div class="eye eye_left"></div> 
            <div class="black_eye black_left"></div> 
        
        <div class="eye eye_right"></div> 
            <div class="black_eye black_right"></div> 
        </div> 
        <div id="base"> 
            <div id="base_white"></div> 
                <div id="nose"> 
                    <div id="nose_light"></div> 
                </div> 
                <div id="nose_line"></div> 
                <div id="mouth"></div> 
                <div id="mouth_rewrite"></div>
                <div id="mouth_laugh">
                    <div id="mouth_rewritel"></div> 
                    <div id="mouth_rewriter"></div> 
                </div> 
                <div id="mouth_down">
                    <div id="mouth_tongue"></div>
                </div> 
                <div id="firefox_mouth"></div> 
 
                <div class="whiskers whi_right_top rotate160"></div> 
                <div class="whiskers whi_right"></div> 
                <div class="whiskers whi_right_bottom rotate20"></div> 
                    
                <div class="whiskers whi_left_top rotate20"></div> 
                <div class="whiskers whi_left"></div> 
                <div class="whiskers whi_left_bottom rotate160"></div> 
        </div> 
    </div> 
    <div id="choker"> 
        <div id="belt"></div> 
        <div id="bell"> 
          <div id="bell_line"></div> 
            <div id="bell_circle"></div> 
            <div id="bell_under"></div> 
        <div id="bell_light"></div> 
        </div> 
    </div> 
    <div id="body"> 
    <div id="doutai"></div> 
        <div class="base_white2 doutai_center"></div> 
                <div id="pocket"> 
                    <div id="circle"></div> 
                    <div id="circle_rewrite"></div> 
                </div> 
    </div> 
    <div id="hand_right"> 
        <div id="arm_right">
   ...

CSS

* {
    margin: 0;
    padding: 0;
}
body{
    background:#fff;
}

#doraemon{
    position:relative;
    margin:20px auto auto auto; 
    width:300px;
}
#instr{
    float:right;
    width:400px;
    font-size:14px;
    border-left:2px solid black;
    padding-left:20px;
}
#head_light{
    width:50px;
    height:50px;
    transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        -o-transform: rotate(20deg);
    box-shadow:80px 20px 50px #fff;
        -webkit-box-shadow:80px 20px 55px #fff;
        -moz-box-shadow:80px 20px 50px #fff;
    border-radius:45px;
        -webkit-border-radius:45px;
        -moz-border-radius:60px;
    position:absolute;
    top:-20px;
    left:170px;
    opacity:0.5
}
 
#face{
    position:relative;
    width:310px;
    height:300px;
    border-radius:146px;
        -webkit-border-radius:146px;
        -moz-border-radius:146px;
    background:#07beea; 
    background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444));    
    background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
    border:#333 2px solid;
    top:-15px;
    box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
        -webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
        -moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
    
}
 
#base{
    position:relative;
    top:-5px;
}
 
#base_white{
    position:absolute;
    border:#000 2px solid;
    width:264px;
    height:196px;
    border-radius: 150px 150px;
        -webkit-border-radius: 150px 150px;
        -moz-border-radius: 150px 150px;
    background:#FFF;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000)); 
    background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
 ...

JavaScript

$(document).ready(function(){
  $("#face").hover(function(){
    $("#nose_line").css("height","60px");
    $("#mouth").css("visibility","hidden");
    $("#mouth_rewrite").css("visibility","hidden");
    $("#mouth_laugh").css("visibility","visible");
    $("#mouth_rewritel").css("visibility","visible");
    $("#mouth_rewriter").css("visibility","visible");
    $("#mouth_down").css("visibility","visible");
    $("#mouth_tongue").css("visibility","visible");
    },function(){
    $("#nose_line").css("height","100px");
    $("#mouth").css("visibility","visible");
    $("#mouth_rewrite").css("visibility","visible");
    $("#mouth_laugh").css("visibility","hidden");
    $("#mouth_rewritel").css("visibility","hidden");
    $("#mouth_rewriter").css("visibility","hidden");
    $("#mouth_down").css("visibility","hidden");
    $("#mouth_tongue").css("visibility","hidden");
  });
});