JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<!-- http://i.imgur.com/jE4YWnx.jpg -->
<div class="cupcake">
  <div class="body">
  
  </div>
  <div class="head">
  
  </div>
  <div class="hat">
    <div class="cone-wrap">
      <span class="cone">
        <i></i>
        <i></i>
        <i></i>
      </span>
    </div>
    <div class="fuzz">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
    <span class="topper"></span>
  </div>
</div>

SCSS

*,
*:before,
*:after{
  box-sizing: border-box;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

// COLOURS
$c-blue: #43B8F0;
$c-blue-l: #8AD0EA;
$c-gold: #E8C000;
$c-gold-l: #ECD673;
$c-pink: #F374A7;
$c-light: #FFF;

.cupcake{
  background-color: #ddd;
  position: relative;
  max-width: 500px;
  &:before{
    padding-top: 100%;
    display: block;
    content: '';
  }
}

// HAT
.hat{
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  transform-origin: bottom center;
  transform: rotate(-20deg);
  &:after{
    content: '';
    display: block;
    padding-top: 100%;
  }
  .topper{
    position: absolute;
    top: 0;
    left: 42.5%;
    background-color: $c-gold;
    border-radius: 50% 50% 40% 40%;
    width: 30%;
    padding-top: 30%;
    transform: translateX(-35%) scaleY(0.85) rotateZ(-20deg);
    &:after{
      content: '';
      display: block;
      width: 30%;
      padding-top: 30%;
      background-color: $c-gold-l;
      position: absolute;
      top: 20%;
      right: 15%;
      border-radius: 50%;
      transform: rotateZ(20deg) scaleY(1.2);
    }
  }
  .cone-wrap{
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-top: 50%;
    transform-origin: top center;
    transform: scaleY(2.5);
    .cone{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: block;
      padding-top: 100%;
      background: $c-blue;
      transform: translateY(20%) rotate(45deg);
      overflow: hidden;
      i{
        background: $c-light;
        display: block;
        padding-top: 5%;
        width: 200%;
        position: absolute;
        left: -20%;
        top: 55%;
        transform-origin: top left;
        transform: rotate(-55deg);
        &:nth-child(2){
          top: 77%;
        }
        &:nth-child(3){
          top: 100%;
        }
      }
    }
  }
  .fuzz{
    position: absolute;
    top: 135%;
    left: 0;
...