JSFiddle - React, Tailwind, and code Playground

by Diana Lemen

HTML

<div class="black">
  <div class="yellow"></div>
  <div class="black"></div>
  <div class="yellow"></div>
  <div class="yellow circle"></div>
  <div class="yellow circle"></div>
  <div class="black circle"></div>
  <div class="black circle"></div>
  <div class="black circle"></div>
  <div class="black circle"></div>
</div>

CSS

div {
    width: 100%;
    height: 94vh;
    background: #191919;
    position:relative;
  }
  
  div div {
    position: absolute;
    left: 80px;
    top:92px;
    height: 10px;
    width: 230px;
  }
  
  div > div:first-child {
    z-index:1;
    height: 90px;
    width: 230px;
  }
  
  div > div:not(:first-child) {
    z-index: 2;
  }
  
  div > div:nth-child(2) {
    height: 32px;
    width: 70px;
    left: 160px;
    border-radius: 0 0 5px 5px ;
  }
  
  div > div:nth-child(3) {
    height: 20px;
    width: 20px;
    top: 104px;
    left: 185px;
  }
  
  div > div:nth-child(4),
  div > div:nth-child(5) {
    height: 10px;
    width: 10px;
    top: 99px;
  }
  
  div > div:nth-child(4) {
    left: 180px;
  }
  
  div > div:nth-child(5) {
    left: 201px;
  }
  div > div:nth-child(6),
  div > div:nth-child(7) {
    height: 95px;
    width: 90px;
  }
 
  div > div:nth-child(6) {
    left: 30px;
  }
  
  div > div:nth-child(7) {
    left: 270px;
  }
  
  div > div:nth-child(8),
  div > div:nth-child(9) {
    height: 130px;
    width: 140px;
  }
  
  div > div:nth-child(8) {
    left: 74px;
    top: 148px;
  }
  
  div > div:nth-child(9) {
    top: 150px;
    left: 175px;
  }
  
  .black {
    background: #191919;
  }
  
  .yellow {
    background: #F2AD43;
  }
  
  .circle {
    border-radius: 100%;
  }