JSFiddle - React, Tailwind, and code Playground

by zlobul

HTML

<div class="progress">
    <div class="border-right"></div>
    <div class="bar-base"></div>
</div>

CSS

$height: 28px;
$padding-top: 2px;
$padding-left: 10px;

.progress {
  position: relative;
  display: block;
  height: $height;
}
  .border-right {
    position: absolute;
    right: 0px;
    left: 30px;
    top: 0px;
    height: $height;
  }
  
  .bar-base {
    position: absolute;
    top: $padding-top;
    bottom: $padding-top;
    left: $padding-left;
    right: $padding-left;
    height: ($height - $padding-top*5);
    border-radius:10px;     
    box-shadow: 
        0 0 0 1px blue,
        0 0 0 2px blue,
        0 0 0 3px blue,
        0 0 0 4px blue,
        0 0 0 5px #FFFFFF40;
    background: linear-gradient(to right,#BF0882  10%, white 80%);
    width: 200px;
    height: 20px;
  }