JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<!--div id='hue'>
    <div id='ie-1'></div>
    <div id='ie-2'></div>
    <div id='ie-3'></div>
    <div id='ie-4'></div>
    <div id='ie-5'></div>
    <div id='ie-6'></div>
</div-->
<br/><br/>
<div id='hue1'>
    <div id='ie-1'></div>
    <div id='ie-2'></div>
    <div id='ie-3'></div>
    <div id='ie-4'></div>
    <div id='ie-5'></div>
    <div id='ie-6'></div>
</div>
<br/><br/>
<div id='hue2'>
    <div id='ie-1'></div>
    <div id='ie-2'></div>
    <div id='ie-3'></div>
    <div id='ie-4'></div>
    <div id='ie-5'></div>
    <div id='ie-6'></div>
</div>
<br/><br/>
<div id='hue3'>
    <div id='ie-1'></div>
    <div id='ie-2'></div>
    <div id='ie-3'></div>
    <div id='ie-4'></div>
    <div id='ie-5'></div>
    <div id='ie-6'></div>
</div>
<br/><br/>
<div id='hue4'>
    <div id='ie-1'></div>
    <div id='ie-2'></div>
    <div id='ie-3'></div>
    <div id='ie-4'></div>
    <div id='ie-5'></div>
    <div id='ie-6'></div>
</div>
<br/><br/>
<div id='hue5'>
    <div id='ie-1'></div>
    <div id='ie-2'></div>
    <div id='ie-3'></div>
    <div id='ie-4'></div>
    <div id='ie-5'></div>
    <div id='ie-6'></div>
</div>
<br/><br/>
<div id='hue6'>
    <div id='ie-1'></div>
    <div id='ie-2'></div>
    <div id='ie-3'></div>
    <div id='ie-4'></div>
    <div id='ie-5'></div>
    <div id='ie-6'></div>
</div>

CSS

#hue {
    height:20px;
    width: 175px;  
    border-radius:5px;
    
    background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

#hue1 {
    height:20px;
    width: 175px;  
    border-radius:5px;
    
    background: linear-gradient(to right, #FF00FF 0%, #ff0000 50%, #FFFF00 100%);
}

#hue2 {
    height:20px;
    width: 175px;  
    border-radius:5px;
    
    background: linear-gradient(to right, #FFFF00 0%, #00FF00 50%, #00FFFF 100%);
}

#hue3 {
    height:20px;
    width: 175px;  
    border-radius:5px;
    
    background: linear-gradient(to right, #00FFFF 0%, #0000FF 50%, #FF00FF 100%);
}

#hue4 {
    height:20px;
    width: 175px;  
    border-radius:5px;
    
    background: linear-gradient(to right, #ff0000 0%, #FFFF00 50%, #00FF00 100%);
}

#hue5 {
    height:20px;
    width: 175px;  
    border-radius:5px;
    
    background: linear-gradient(to right, #0000FF 0%, #FF00FF 50%, #ff0000 100%);
}

#hue6 {
    height:20px;
    width: 175px;  
    border-radius:5px;
    
    background: linear-gradient(to right, #00FF00 0%, #00FFFF 50%, #0000FF 100%);
}










background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

#ie-1 { 
    height:17%; 
    filter:...