JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id=mydraw>
  <div class="arrow up"></div>
  <div class="human boy">
    <div class=hair></div>
    <div class=face></div>
    <div class=neck></div>
    <div class=arms></div>
    <div class=bottom></div>
    <div class=legs></div>
  </div>
  <div class="human girl">
    <div class=hair></div>
    <div class=face></div>
    <div class=neck></div>
    <div class=arms></div>
    <div class=bottom></div>
    <div class=legs></div>
  </div>
  <div class="arrow down"></div>
</div

SCSS

$front-color = black
$unit = 10px
u(scale = 1)
  (scale * $unit)px

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

utransform()
  vendor('transform', arguments)

#mydraw
  margin auto
  background #FFF //hsl(150, 100%, 95)
  overflow hidden
  position relative
  height h = $unit*30
  width $unit*20

  div,
  div:before,
  div:after
    content ''
    background $front-color
    position absolute
    
  //------------------
  // ARROWS

  .arrow
    height u()
    width u(3)

    &:before
      height u()
      width u()
      left u()
      top u(-1)

    &:after
      height u(2)
      width u(5)
      left u(-1)
      top u()

    &.up
      left u(7)
      top u()

    &.down
      left u(7)
      utransform rotate(180deg)
      top 25 * $unit

    
  //------------------
  // HUMAN

  .human
    height 0
    width 0

    .hair
      top u(7)
      height u()
      width u()

    .face
      top u(8)
      &:after
      &:before
        height u(2)
        width u()
      &:before
        left u(-1)
      &:after
        left u(1)
      
    .neck
      top u(10)
      height u(2)
      width u()
      &:before
          top u(1)
          height u()
          width u(2)

    .arms
      top u(12)
      &:after
      &:before
        height u(4)
        width u()
      &:before
        left u(-2)
      &:after
        left u(2)

    .bottom
      top u(15)
      height u(3)
      width u()

    .legs
      top u(16)
      &:after
      &:before
        height u(5)
        width u()
      &:before
        left u(-1)
      &:after
        left u(1)
    //------------------
    // HUMAN.BOY
    &.boy
      left u(5)

      .legs
        &:after
          height u(7)
          left u(1)
          top u(-2)

    //------------------
    // HUMAN.GIRL

    &.girl
      left u(11)

      .hair
        height u()
        width u(3)
        &:before
          top u(-1)
          left u(1)
          height u(2)
          width u()
        

 ...