JSFiddle - React, Tailwind, and code Playground

by Ali Hameed

HTML

<div dir="rtl" style="text-align: right;" trbidi="on">
<ul class="flatui">
<li style="background: #5C97BF;">#5C97BF</li>
<li style="background: #4B77BE;">#4B77BE</li>
<li style="background: #1F3A93;">#1F3A93</li>
<li style="background: #2574A9;">#2574A9</li>
<li style="background: #67809F;">#67809F</li>
<li style="background: #34495E;">#34495E</li>
<li style="background: #3A539B;">#3A539B</li>
<li style="background: #1E8BC3;">#1E8BC3</li>
<li style="background: #6BB9F0;">#6BB9F0</li>
<li style="background: #22313F;">#22313F</li>
<li style="background: #336E7B;">#336E7B</li>
<li style="background: #19B5FE;">#19B5FE</li>
<li style="background: #89C4F4;">#89C4F4</li>
<li style="background: #2C3E50;">#2C3E50</li>
<li style="background: #3498DB;">#3498DB</li>
<li style="background: #22A7F0;">#22A7F0</li>
<li style="background: #94E0EE;">#94E0EE</li>
<li style="background: #52B3D9;">#52B3D9</li>
<li style="background: #59ABE3;">#59ABE3</li>
<li style="background: #26A65B;">#26A65B</li>
<li style="background: #1E824C;">#1E824C</li>
<li style="background: #00B16A;">#00B16A</li>
<li style="background: #2ABB9B;">#2ABB9B</li>
<li style="background: #4DAF7C;">#4DAF7C</li>
<li style="background: #03A678;">#03A678</li>
<li style="background: #26C281;">#26C281</li>
<li style="background: #019875;">#019875</li>
<li style="background: #3FC380;">#3FC380</li>
<li style="background: #16A085;">#16A085</li>
<li style="background: #2ECC71;">#2ECC71</li>
<li style="background: #C5EFF7;">#C5EFF7</li>
<li style="background: #C8F7C5;">#C8F7C5</li>
<li style="background: #049372;">#049372</li>
<li style="background: #36D7B7;">#36D7B7</li>
<li style="background: #66CC99;">#66CC99</li>
<li style="background: #1BA39C;">#1BA39C</li>
<li style="background: #1BBC9B;">#1BBC9B</li>
<li style="background: #65C6BB;">#65C6BB</li>
<li style="background: #BFBFBF;">#BFBFBF</li>
<li style="background: #ABB7B7;">#ABB7B7</li>
<li style="background: #DADFE1;">#DADFE1</li>
<li style="background:...

CSS

ul.flatui {
float: left;
width: 100%;
text-align: center;
color: #CFCECE;
font: 0% sans-serif;
margin: 0;
position: relative;
}
.post ul {
list-style: inherit;
}
ul.flatui li:before {
display: none !important;
}
.flatui li {
float: left;
width: 20%;
padding: 4% 0;
list-style: none;
background: #444;
text-align: center;
font: 20px lolblogger;
color: #fff;
margin: 0;direction: ltr;
}
.widget .post-body li {
  margin-bottom: .0em;
  padding-top: 40px;
  padding-bottom: 40px;
font-family: sans-serif;