JSFiddle - React, Tailwind, and code Playground

by NotInUse

HTML

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>

CSS

div { height: 20px; margin: 0 0 10px 0; }

.a { 
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(150,0,0) 100%);
}
.b { 
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(150,100,0) 100%);
}
.c { 
background: linear-gradient(to bottom, rgb(255,0,0) 0%, rgb(200,150,0) 50%);
}
.d { 
background: linear-gradient(to bottom, rgb(255,60,0) 0%, rgb(250,200,0) 90%);
}
.e { 
background: linear-gradient(to bottom, rgb(255,150,0) 0%, rgb(250,250,0) 90%);
}
.f { 
background: linear-gradient(to bottom, rgb(255,200,0) 0%, rgb(250,250,0) 90%);
}