JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<a class="test"></a>
<br />
<input type="text" name="percent" id="percent" placeholder="set %" />

SCSS

.test{
  position: relative;
  display:block;
   width: 500px;
   height: 30px;
   background: #FFC;
   border: 1px solid red;
   &:before{
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     height: 30px;
     width: var(--width);
     background: #FCF;
     transition: width 300ms ease;
   }
}

JavaScript

document.querySelector('#percent').addEventListener('input', function(e){
	var percent = parseInt(this.value);
  document.documentElement.style.setProperty('--width', percent + '%');
})