JSFiddle - React, Tailwind, and code Playground

by illya_v

HTML

<div class="minion">
    <div class='minion-body'>
      <div class="minion-head">
      <div class="hair-container">
        <div class="hair left h1"></div>
        <div class="hair left h2"></div>
        <div class="hair left h3"></div>
        <div class="hair left h4"></div>
        <div class="hair left h5"></div>
        <div class="hair left h6"></div>
        <div class="hair left h7"></div>
        <div class="hair left h8"></div>
        <div class="hair left h9"></div>
        <div class="hair left h10"></div>
        <div class="hair left h11"></div>
        <div class="hair right h12"></div>
        <div class="hair right h13"></div>
        <div class="hair right h14"></div>
        <div class="hair right h15"></div>
        <div class="hair right h16"></div>
        <div class="hair right h17"></div>
        <div class="hair right h18"></div>
        <div class="hair right h19"></div>
        <div class="hair right h20"></div>
        <div class="hair right h21"></div>
        <div class="hair right h22"></div>
        <div class="hair right h23"></div>
        <div class="hair right h24"></div>
      </div> 
      <div class="minion-eyes" >
        <div class="minion-eyes-stramp"></div>
        <div class="minion-eyes-glasses">
          <div class="left-glass-container">
            <div class="left-glass">
              <div class="minion-eyelid">
                <div class="hotspot"></div>
                <div class="minion-white">
                  <div class="minion-cornea">
                    <div class="minion-apple"></div>
                    <div class="minion-hotspot"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-glass-container">
            <div class="right-glass">
              <div class="minion-eyelid">
                <div class="hotspot"></div>
                <div class="minion-white">
                  <div class="minion-cornea">
  ...

CSS

div{
      position: absolute;
    }
    .minion{
      top: 50%;
      left: 50%;
      
      width: 600px;
      height: 600px;
      
      margin: -300px 0 0 -300px;

    }
    .minion-body{
      left: 50%;
      bottom: 100px;

      width: 200px;
      height: 380px;

      margin: 0 0 0 -100px;

      background: #FAE47F;

      border-radius: 100px 100px 60px 60px;
    }
    .minion-head{

      width: 200px;
      height: 260px;
      background: #FAE47F;
      cbackground: green;
      border-radius: 200px;
      border-bottom-left-radius:  200px 30px;
      border-bottom-right-radius:  200px 30px;
      z-index: 3;
      box-shadow: inset -15px 0 50px rgba( 0, 0, 0, .2);
    }
    .minion-tors{
      top: 256px;
      width: 200px;
      height: 80px;
      background: #FAE47F;
      cbackground: green;
      border-bottom-left-radius:  200px 30px;
      border-bottom-right-radius:  200px 30px;
      z-index: 1;
      box-shadow: inset -15px 0 50px rgba( 0, 0, 0, .2);
    }

      .minion-pants{
      left: 50%;
      bottom: 0;

      width: 200px;
      height: 80px;

      margin: 0 0 0 -100px;

      background: #325785;

      border-radius: 0 0 60px 60px;
      box-shadow: inset 0px 0px 20px rgba( 0, 0, 0, .8 );
    }
    .minion-pants-front{
      left: 58%;
      bottom: 43px;

      width: 140px;
      height: 90px;

      margin: 0 0 0 -70px;

      background: #325785;
      z-index: 2;
      
    }
    .pocket-front{
      top: 40px;
      left: 50%;
      margin: 0 0 0 -25px;
      width: 50px;
      height: 36px;
      background: #325785;
      border-top: 1px solid #224775;
      border-radius: 0 0 20px 20px;
      box-shadow: 0px 0px 6px rgba( 0, 0, 0, .2 );
    }
    .logo{
      top: 50%;
      left: 50%;
      margin: -13px 0 0 -13px;
      width: 26px;
      height: 26px;
      color: #325785;
      background: #151515;
      border-radius: 15px;
      text-align: center;
      font-size: 20px;
      line-height: 26px;
     ...