JSFiddle - React, Tailwind, and code Playground

HTML

<style>
  @import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700');
</style>

<div class="pimp-piggy">


  <div class="pig">
    <div class="upper-container">
      <div class="speech-bubble">
        <div class="sign-up-text">
          Sign Up to be a Pimp Piggy!
        </div>
        <div class="welcome-text">
          Welcome!
        </div>
        <div class="arrow-left">
        </div>
      </div>

      <div class="head">
        <div class="eyes">
          <div class="left pupil">
          </div>
          <div class="left moon">
            <img src="https://svgshare.com/i/5AK.svg">
          </div>

          <div class="right pupil">
          </div>
          <div class="right moon">
            <img src="https://svgshare.com/i/5AK.svg">
          </div>
        </div>

        <div class="snout-container">
          <div class="snout left">
          </div>
          <div class="snout right">
          </div>
        </div>

        <div class="left-ear">
          <img src="https://svgshare.com/i/4y3.svg">
        </div>
        <div class="right-ear">
          <img src="https://svgshare.com/i/4yC.svg">
        </div>
      </div>
    </div>

    <div class="mid-container">

      <div class="bling">
        <div class="medallion">
          $
          <div class="inner-ring">
          </div>
        </div>
        <div class="chain dark left chain-1">
        </div>
        <div class="chain light left chain-2">
        </div>
        <div class="chain dark left chain-3">
        </div>
        <div class="chain light left chain-4">
        </div>
        <div class="chain dark right chain-5">
        </div>
        <div class="chain light right chain-6">
        </div>
        <div class="chain dark right chain-7">
        </div>
        <div class="chain light right chain-8">
        </div>
      </div>

      <div class="body">
      </div>

      <div class="arms">
        <div class="left arm">
        </div>
     ...

SCSS

$button-color: #CD9595;
$pig-color: #FFBFBF;

$body-z-index: 0;
$arm-in-front: $body-z-index + 2;
$arm-in-back: $body-z-index - 1;

.pimp-piggy {
  width: 100%;
  height: 100%;
  background-color: #FFE8E8;

  display: flex;
  flex-direction: row;
  justify-content: center;

  .pig {
    position: relative;
    margin: 80px;
    margin-left: 25%;
    min-width: 120px;
    height: 270px;
    top: 32px;
    z-index: 10;

    .upper-container {
      position: relative;
      width: 110%;
      height: 45%;

      .speech-bubble {
        background-color: white;
        border-radius: 100px;
        width: 350px;
        height: 91px;
        position: absolute;
        top: -100px;
        right: -400px;
        font-size: 24px;


        .sign-up-text {
          font-family: 'Cabin', sans-serif;
          color: $button-color;
          text-align: center;
          line-height: 400%;
          animation-name: sign-up-text;
          animation-duration: 4s;
          animation-iteration-count: 1;
          position: relative;
          animation-timing-function: ease-in;
        }

        .welcome-text {
          font-family: 'Cabin', sans-serif;
          color: $button-color;
          text-align: left;
          line-height: 0%;
          left: 10%;
          animation-name: welcome-text;
          animation-duration: 4s;
          animation-iteration-count: 1;
          position: relative;
          animation-timing-function: ease-in;
          opacity: 0;
        }


        .arrow-left {
          width: 0px; 
          height: 0px; 
          border-top: 23px solid transparent;
          border-bottom: 23px solid transparent;
          border-right: 60px solid white;
          transform: rotate(-45deg);
          position: absolute;
          left: -8%;
          top: 75%;
        }
      }


      .head {
        position: relative;
        border-radius: 50%;
        background-color: $pig-color;
        height: 100%;
        width: 100%;
        top:...