JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="main">
  <div class="firstrect">
    <svg id="svgMain" viewBox="0 0 50 10">
          <rect width="100%" height="100%" style="fill: rgb(102, 102, 201);" />
          <rect id="over" x="10" y="9" style="fill: rgb(102, 201, 171);" />
        </svg>
  </div>
  <div class="secondrect"></div>
</div>

CSS

#svgMain {
  position: relative;
   overflow: visible;
}
rect#over {
  position: absolute;
  width: 20%;
  height: 20%;
}
.secondrect {
  width: 100%;
  height: 50px;
  background: purple;
}