JSFiddle - React, Tailwind, and code Playground

by kannan ds

HTML

<input type='checkbox' id='click' />
<label for='click'>Click Me!</label>
<br />
<br />
<div class='progress'>
    <div></div>
</div>

CSS

#click {
    display:none;
}
label {
    border:1px solid teal;
    background:lightblue;
    padding:5px;
    border-radius:5px;
    font-family:arial;
    opacity:.7;
    cursor:pointer;
}
label:hover {
    opacity:.8;
}
label:active {
    opacity:1;
}
#click:checked ~ .progress div {
    width:30%;
}
.progress {
    background:red;
    height:25px;
}
.progress div {
    background:green;
    height:100%;
    width:0;
    transition:width 250ms ease-in;
}