JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bottle">
    <div class="bot_head">
        <div class="bot_mouth"></div>
        <div class="head_light"></div>
    </div>
    <div class="bot_neck">
        <div class="neck_light"></div>
    </div>
    <div class="bot_body">
        <div class="bot_inner">
            <div class="water">
                <div class="clover">
                    <span class="leave angle_n"></span>
                    <span class="leave angle_s"></span>
                    <span class="leave angle_w"></span>
                    <span class="leave angle_e"></span>
                </div>
                <div class="jellyfish">
                    <div class="jell_head"></div>
                    <div class="jell_tail"></div>
                </div>
                <div class="bubble bubble1"></div>
                <div class="bubble bubble2"></div>
                
            </div>
        </div>
        <div class="body_light"></div>
    </div>
</div>

CSS

body { margin:0 auto; background:#ccc; }
        
        .bottle { width:100px; margin:100px auto; }
            .bot_head { width:80px; height:30px; border:1px solid rgba(255,255,255,.5); border-top:none; border-bottom:none; margin:0 auto; position:relative; }
            .bot_head:before,.bot_head:after { display:block; width:78px; height:10px; content:''; position:absolute; left:0; top:0;
                                               border:2px solid rgba(255,255,255,.5); 
                                               border-top:1px solid rgba(255,255,255,.4); 
                                               border-bottom-color:rgba(255,255,255,.6); 
                                               border-radius:46px/10px;
                                               box-shadow:0 0 6px rgba(255,255,255,.6) inset;
            }    
            .bot_head:before { top:-6px; box-shadow:0 0 6px rgba(255,255,255,.4) inset; }
            .bot_head:after { top:22px; box-shadow:0 0 6px rgba(255,255,255,.6) inset,0 3px 3px -1px rgba(255,255,255,.3);}
                .bot_mouth { width:42px; height:50px; border:1px solid rgba(255,255,255,.3); border-top:none; border-bottom:none; margin:0 auto; position:relative; 
                             background:-moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,.3));
                             background:-webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,.3));
                             background:-webkit-gradient(linear,center top,center bottom,from(rgba(255,255,255,.3)),color-stop(.5 rgba(255,255,255,0)),color-stop(.95 rgba(255,255,255,0)),to(rgba(255,255,255,.3)));
                             background:-o-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,.3));
                             box-shadow:0 0 6px rgba(255,255,255,.3);
               ...