JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="multi-cor">
    <ul>
        <li class="md" data-color="#4AAA24"></li>
        <li class="md" data-color="#4685EE"></li>
        <li class="md" data-color="#F22744"></li>
        <li class="md" data-color="#FFCB0C"></li>
        <li class="md" data-color="#4AAA24"></li>
        <li class="md" data-color="#4685EE"></li>
        <li class="md" data-color="#F22744"></li>
        <li class="md" data-color="#FFCB0C"></li>
        <li class="sm" data-color="#4AAA24"></li>
        <li class="sm" data-color="#4685EE"></li>
        <li class="sm" data-color="#FF0000"></li>
        <li class="sm" data-color="#FFCB0C"></li>
    </ul>
</div>

CSS

body {
  padding: 0; margin: 0;
}

.multi-cor ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.multi-cor ul li {
    float: left;
    width: 8.33334%;
    height: 6px;
    display: inline-block;
}

.multi-cor ul li:nth-child(1) { background-color: #4AAA24; }
.multi-cor ul li:nth-child(2) { background-color: #4685EE; }
.multi-cor ul li:nth-child(3) { background-color: #FF0000; }
.multi-cor ul li:nth-child(4) { background-color: #FFCB0C; }
.multi-cor ul li:nth-child(5) { background-color: #4AAA24; }
.multi-cor ul li:nth-child(6) { background-color: #4685EE; }
.multi-cor ul li:nth-child(7) { background-color: #FF0000; }
.multi-cor ul li:nth-child(8) { background-color: #FFCB0C; }
.multi-cor ul li:nth-child(9) { background-color: #4AAA24; }
.multi-cor ul li:nth-child(10) { background-color: #4685EE; }
.multi-cor ul li:nth-child(11) { background-color: #FF0000; }
.multi-cor ul li:nth-child(12) { background-color: #FFCB0C; }

.multi-cor ul li.md {
  width: 12.5%;
}
.multi-cor ul li.sm {
  width: 25%;
}
@media screen and (max-width: 768px) {
  .multi-cor ul li.md {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .multi-cor ul li.sm {
    display: none;
  }
}