JSFiddle - React, Tailwind, and code Playground

HTML

<div id="router">
  <div id="body">
    <div id="wifi">
      <div class="signal"></div>
      <div class="signal"></div>
      <div class="signal"></div>
    </div>
    <div id="antennas">
      <div class="antenna"></div>
      <div class="antenna"></div>
    </div>
    <div id="lights">
      <div class="light green"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
    </div>
  </div>
  <div id="feet"></div>
</div>

SCSS

body {
  margin: 0;
  padding: 0;
}

#router {
  
  #body {
    margin: 200px auto 0px;
    width: 280px;
    height: 84px;
    background-color: #c9e3ed;
    border-radius: 30px 30px 10px 10px / 20px 20px 10px 10px;
    position: relative;
    
    #wifi {
      
      .signal {
        border-right: 12px solid #ee7230;
        border-bottom: 12px solid #ee7230;
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
        transform: rotate(-135deg);
        position: absolute;
  
        &:first-child {
          left: 50%;
          top: -160px;
          margin-left: -56px;  
          width: 100px;
          height: 100px;
          border-radius: 0 0 100px 0;
          animation: blink 3s infinite;
          animation-delay: 1s;
        }
 
        &:nth-child(2) {
          left: 50%;
          top: -130px;
          margin-left: -43px;  
          width: 74px;
          height: 74px;
          border-radius: 0 0 74px 0;
          animation: blink 3s infinite;
          animation-delay: 2s;
        }        
    
        &:last-child {
          left: 50%;
          top: -100px;
          margin-left: -30px;  
          width: 48px;
          height: 48px;
          border-radius: 0 0 48px 0;
          animation: blink 3s infinite;
          animation-delay: 3s;
          
          &:after {
            content: '';
            position: absolute;
            right: 35%;
            bottom: 35%;
            height: 30px;
            width: 30px;
            background-color: #ee7230;
            border-radius: 50%;
            margin-left: -25px;
            animation: blink 3s infinite;
            animation-delay: 4s;
          }
        }              
        
      }
      
    }
    
    #antennas {
      position: absolute;
      width: 100%;

      .antenna {
        width: 12px;
        height: 140px;
        background-color: #333;
        position: absolute;
        bottom: -30px;
        
        &:after {
         ...