JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div id="wrapper">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

SCSS

#wrapper {
  height: 420px;
  width: 400px;
  border: 1px solid #ccc;
  position: relative;
  margin: 20px auto;
}

.line {
  height: 5px; width: 10px;
  background-color: #000;
  position: absolute;
}

@for $i from 1 through 40 {
  $width: 10px + ((41 - $i) * 3);
  $half: $width / 2;
  .line:nth-child(#{$i}) {
    left: calc(50% - #{$half});
    width: $width;
    top: $i * 10px;
  }
}