JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<body>
<p>#9059FF: <span id="stop-0"></span></p>
<p>#FF4AA2: <span id="stop-1"></span></p>
<p>#FFBD4F: <span id="stop-2"></span></p>

<div id="progress">
</div>
</body>

CSS

#stop-0 {
  background-color: #9059FF;
  }
#stop-1 {
  background-color: #FF4AA2;
  }
#stop-2 {
  background-color: #FFBD4F;
  }

p {
  font-family: monospace;
  white-space: pre;  
}
span { 
display: inline-block;
width: 3em; height: 1em;
outline: 1px solid #fff;
}
body {
  background-color: #ccc;
  --progress-gradient: linear-gradient(90deg, #9059FF 0%, rgb(0,97,224) 65.08%);
  --progress-gradient1: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
}
#progress {
  width: 200px;
  height: 6px;
  outline: 1px solid #fff;
  
  background: var(--progress-gradient); /* linear-gradient(#9059FF, rgb(0,97,224)); */
}