JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bear">
    <div class="circle">
        <span></span>
    </div>
    <div class="flHeart"></div>
    <div class="flower">
        <span class="fl01"></span>
        <span class="fl02"></span>
        <span class="fl03"></span>
        <span class="fl04"></span>
        <span class="fl05"></span>
        <span class="fl06"></span>
        <span class="fl07"></span>
        <span class="fl08"></span>
        <span class="fl09"></span>
        <span class="fl10"></span>
        <span class="fl11"></span>
        <span class="fl12"></span>
    </div>
    <div class="top">
        <div class="earL"></div>
        <div class="earR"></div>
    </div>
    <div class="head">
        <div class="eyeL"></div>
        <div class="eyeR"></div>
        <div class="mooth">
            <span></span>
        </div>
    </div>
    <div class="main"></div>
    <div class="arm"></div>
    <div class="foot"></div>
</div>

CSS

body { margin:0; }
    
    .bear { float:left; margin:0 20px 0 100px; }
        .circle { overflow:hidden; width:20px; height:180px; position:relative; top:115px; left:130px; z-index:2;
                  -moz-transform:rotate(60deg); 
                  -webkit-transform:rotate(60deg); 
                  -o-transform:rotate(60deg); 
                  transform:rotate(60deg); 
        }
        .circle span { display:block; width:200px; height:200px; border:6px solid #333; border-radius:100px;}
        .flHeart { width:30px; height:30px; background:#fa0; position:relative; top:-10px; left:165px; z-index:4; border-radius:30px; box-shadow:0 0 1px #ffc601; }
        .flower { width:30px; height:30px; background:#fa0; position:relative; top:-40px; left:165px; z-index:3; border-radius:30px; box-shadow:0 0 1px #ffc601; }
        .flower span { display:block; width:15px; height:25px; background:#09b709; position:absolute; z-index:-1; border-radius:15px/25px;}
            .fl01 { top:-15px; left:24px;
                    -moz-transform:rotate(30deg); 
                    -webkit-transform:rotate(30deg); 
                    -o-transform:rotate(30deg); 
                    transform:rotate(30deg);  
                    box-shadow:1px 1px 0 #caf183; 
            }
            .fl02 { top:-3px; left:32px;
                    -moz-transform:rotate(60deg); 
                    -webkit-transform:rotate(60deg); 
                    -o-transform:rotate(60deg); 
                    transform:rotate(60deg); 
            }
            .fl03 { top:8px; left:34px;
                    -moz-transform:rotate(90deg); 
                    -webkit-transform:rotate(90deg); 
                    -o-transform:rotate(90deg); 
                    transform:rotate(90deg); 
            }
            .fl04 { top:18px; left:29px;
                    -moz-transform:rotate(120deg); 
                    -webkit-transform:rotate(120deg); 
                    -o-transform:rotate(120deg); 
                ...