JSFiddle - React, Tailwind, and code Playground

by caprella

HTML

<div id="monster">
    <div id="vampire">
        <div class="head-wrapper">
            <div class="head">
                <div class="cap"></div>
                
                <div class="face">
                    <div class="cheek left-cheek"></div>
                    <div class="cheek right-cheek"></div>
                    
                    <div class="eye left-eye">
                        <div class="iris">
                            <div class="pupil"></div>
                        </div>
                        <div class="eyebrow"></div>
                    </div>
                    <div class="eye right-eye">
                        <div class="iris">
                            <div class="pupil"></div>
                        </div>
                        <div class="eyebrow"></div>
                    </div>
                    
                    <div class="nose"></div>
                    
                    <div class="mouth"></div>
                    
                    <div class="teeth">
                        <div class="tooth left-tooth"></div>
                        <div class="tooth right-tooth"></div>
                    </div>
                </div>
                
                <div class="ears">
                    <div class="ear left-ear"></div>
                    <div class="ear right-ear"></div>
                </div>
                
                <div class="collar"></div>
            </div>
        </div>
        
        <div class="body-wrapper">
            <div class="body">
                <div class="bow">
                    <div class="ribbon left-ribbon"></div>
                    <div class="knot"></div>
                    <div class="ribbon right-ribbon"></div>
                </div>
                
                <div class="arms"></div>
                
                <div class="trunk"></div>
                
                <div class="legs">
                    <div class="leg...

CSS

body {
    margin: 0;
    padding: 20px;
    background: #ffffff;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#monster {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#vampire {
    width: 70%;
    height: 70%;
    position: absolute;
    right: 0;
    bottom: 0;
	z-index: 1;
}
/**
 *  Head
 */
#vampire .head-wrapper {
    width: 100%;
    height: 50%;
    position: relative;
}
#vampire .head {
    position: absolute;
    bottom: 0;
    left: 30%;
    width: 40%;
    height: 80%;
}
#vampire .face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #110d0e;
    border: 1px solid #5d1e26;
    border-top: none;
    
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    
    overflow: hidden;
    position: relative;
	
	z-index: 10;
}
#vampire .face .cheek {
    background: #fde2d7;
    width: 53%;
    height: 80%;
    position: absolute;
    top: 20%;
	
	z-index: 15;
}
#vampire .face .left-cheek {
    border-radius: 37% 50% 0 50%;
    left: 0;
}
#vampire .face .right-cheek {
    border-radius: 50% 37% 50% 0;
    right: 0;
}
/**
 *  Eyes
 */
#vampire .face .eye {
    width: 35%;
    height: 35%;
    background: #ffffff;
    border: 1px solid #5d1e26;
    border-radius: 50%;
    
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    
    position: absolute;
    top: 32%;
	
	z-index: 20;
}
#vampire .face .iris {
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: -webkit-linear-gradient(#e80113, #bd0110);
    background: -moz-linear-gradient(#e80113, #bd0110);
    background: linear-gradient(#e80113, #bd0110);
    
    border: 1px solid #5d1e26;
    position: absolute;
    top: 16%;
}
#vampire .face .pupil {
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: #ffffff;
   ...