JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>

<p style="text-align: center;" class="chars">
<span class="ya1">Я</span>&nbsp;
<span class="ya2">п</span>
<span class="ya3">е</span>
<span class="ya4">д</span>
<span class="ya5">р</span>
<span class="ya6">)</span>
<span class="ya7">0</span>
<span class="ya8">))</span>
</p>

CSS

body{
background-color: #002137;
}

ul {

  border:1px solid #434b1b;
  list-style: none;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 border-radius: 10px;


}

li{ width: 20%; border:1px solid gray;}
li:nth-child(1) {order:1;}
li:nth-child(2) {order:3;}
li:nth-child(3) {order:5;}
li:nth-child(4) {order:7;}
li:nth-child(5) {order:9;}
li:nth-child(6) {order:2;}
li:nth-child(7) {order:4;}
li:nth-child(8) {order:6;}
li:nth-child(9) {order:8;}
li:nth-child(10) {order:10;}
li:nth-child(5)~li { margin-left: 40%; }

li{
color: #414a4c;
border-radius: 5px;
font-weight: bold;
}

.ya1{
color: #E50000;
font-weight: bold;
font-size: 63px;
}

.ya2{
color: #FF8D00;
font-weight: bold;
font-size: 63px;
}

.ya3{
color: #FFEE00;
font-weight: bold;
font-size: 63px;
}

.ya4{
color: #008121;
font-weight: bold;
font-size: 63px;
}

.ya5{
color: #004CFF;
font-weight: bold;
font-size: 63px;
}

.ya6{
color: #760188;
font-weight: bold;
font-size: 63px;
}

.ya7{
color: #ffc0cb;
font-weight: bold;
font-size: 63px;
}

.ya8{
color: #ff8597;
font-weight: bold;
font-size: 63px;
}

.chars{
font-family: sans-serif;
}