JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<div class="block">
  <div class="d1"></div>
  <div class="d2"></div>
</div>

CSS

.block {
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid black;
}

.block div {
  position: absolute;
  left: 0;
  height: 100%;
}

.d1 {
  width: 100%;
  background: linear-gradient(to right, gray 8px, transparent 8px) left repeat-x / 10px 10px;

}

.d2 {
  width: 30%;
  background: linear-gradient(to right, red 8px, transparent 8px) left repeat-x / 10px 10px;

}