JSFiddle - React, Tailwind, and code Playground

by Aaron Hao

HTML

<div id="main">
    <div id="head-neck-body">
        <div id="head-neck">
            <div id="head">
                <div class="shape02"></div>

                <div class="shape0"></div>

                <div class="shape01"></div>

                <div class="shape4"></div>

                <div class="shape5"></div>

                <div class="shape6"></div>

                <div class="shape7"></div>

                <div class="shape8"></div>

                <div class="shape9"></div>

                <div class="shape11"></div>

                <div class="shape12"></div>

                <div class="shape13"></div>

                <div class="shape14"></div>

                <div class="shape15"></div>

                <div class="shape16"></div>

                <div class="shape17"></div>

                <div class="shape18"></div>

                <div class="shape19"></div>

                <div class="shape20"></div>

                <div class="shape21"></div>

                <div class="shape22"></div>

                <div class="shape23"></div>

                <div class="shape26"></div>

                <div class="shape27"></div>

                <div class="shape28"></div>

                <div class="shape29"></div>

                <div class="shape30"></div>

                <div class="shape31"></div>

                <div class="shape32"></div>

                <div class="shape33"></div>

                <div class="shape34"></div>

                <div class="shape35"></div>

                <div class="shape36"></div>

                <div class="shape37"></div>

                <div class="shape38"></div>

                <div class="shape39"></div>

                <div class="shape40"></div>

                <div class="shape41"></div>

                <div class="shape42"></div>

                <div class="shape43"></div>

                <div class="shape44"></div>

                <div class="shape45"></div>

           ...

CSS

#main {
    position: relative;
    padding: 0;
    z-index: 0;
    margin: 30px auto;
    width: 1000px;
    height: 600px;
    opacity: 1;
    }

/* Head */

#head {
    height: auto;
    position: absolute;
    left: 151px;
    top: 138px;
    width: auto;
    padding-top: 20px;
    opacity: 1;
    z-index: 100;
    }

    #head .shape0 {
        height: 0;
        width: 129px;
        border-bottom: 58px solid #DDD9D9;
        border-left: 24px solid transparent;
        border-right: 2px solid transparent;
        border-top: 0 solid transparent;
        z-index: 20;
        }

    #head .shape01 {
        width: 55px;
        height: 55px;
        background: #DDD9D9;
        -webkit-border-radius: 70px;
        -moz-border-radius: 70px;
        border-radius: 70px;
        position: absolute;
        top: 19px;
        left: 26px;
        border: 1px solid #000;
        z-index: 11;
        }

    #head .shape02 {
        border-color: transparent transparent #DDD9D9;
        border-style: solid;
        border-width: 26px 3px 25px 126px;
        width: 0;
        height: 0;
        position: absolute;
        top: -31px;
        left: 25px;
        z-index: 10;
        }

    #head .shape1 {
        position: absolute;
        height: 2px;
        width: 16px;
        background: #DDD9D9;
        bottom: -6px;
        left: -6px;
        border: 1px solid #000;
        z-index: -3;
        }

    #head .shape2 {
        position: absolute;
        bottom: -9px;
        left: -17px;
        height: 8px;
        background: #DDD9D9;
        width: 10px;
        -webkit-border-radius: 0 3px 3px 0;
        -moz-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;
        border: 1px solid #000;
        }

    #head .shape3 {
        position: absolute;
        bottom: -8px;
        left: 8px;
        background: #DDD9D9;
        height: 6px;
        width: 29px;
        border: 1px solid #000;
        z-index: -2;
        }

    #head .shape4 {
  ...

JavaScript

window.open    = function(){};
    window.print   = function(){};
    // Support hover state for mobile.
    if (false) {
      window.ontouchstart = function(){};
    }
"use strict";var CPLocalStorage={clear:function(){this._exec(function(){localStorage.clear()})},setItem:function(e,t){this._exec(function(){localStorage.setItem(e,t)})},getItem:function(e){return this._exec(function(){return localStorage.getItem(e)})},removeItem:function(e){this._exec(function(){localStorage.removeItem(e)})},_exec:function(e){try{return e()}catch(t){}}};
"use strict";var RememberScroll={init:function(){this._scrollToSavedPosition(),this._onUnloadStoreScrollPosition()},_scrollToSavedPosition:function(){var o=CPLocalStorage.getItem(this._getScrollPositionKey());void 0!==o&&window.scrollTo(0,o),CPLocalStorage.removeItem(this._getScrollPositionKey())},_onUnloadStoreScrollPosition:function(){if(window.onunload)return 0;var o=this;window.onunload=function(){var t=document.getElementsByTagName("body")[0];CPLocalStorage.setItem(o._getScrollPositionKey(),t.scrollTop)}},_getScrollPositionKey:function(){var o=document.location.pathname.split("/").pop();return"scrollposition:"+o}};
RememberScroll.init();
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage('resize', "*");
    }