JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="gradient">
    <li class="one"></li>
    <li class="two"></li>
    <li class="three"></li>
</ul>

CSS

.gradient li {
    list-style-type : none;
    height : 20px;
    width : 40px;
}
.one {
    background : -webkit-gradient(linear, left top, left bottom, from(#00aeef), to(#ec008c));
    background : -moz-linear-gradient(top, #00aeef, #ec008c);
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00aeef', endColorstr='#ec008c');
}

.two {
    background : -webkit-gradient(linear, left top, left bottom, from(#ec008c), to(#f88e11));
    background : -moz-linear-gradient(top, #ec008c, #f88e11);
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec008c', endColorstr='#f88e11');
}

.three {
    background : -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#fff200));
    background : -moz-linear-gradient(top, #f88e11, #fff200);
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#fff200');
}