JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<div id="menu">
  <ul>
    <li>
      <span class="radius_bg"></span>
      <div>
        <span class="radius_name">PGIL-24,</span>
        <span class="radius_sum"> 16 502,04 $,</span>
        <span class="radius_proc"> 2.53%</span>
      </div>
    </li>

    <li>
      <span class="radius_bg"></span>
      <div>
        <span class="radius_name">EUROTG 8 3/4 10/30/22,</span>
        <span class="radius_sum"> 16 502,04 $,</span>
        <span class="radius_proc"> 2.53%</span>
      </div>
    </li>

    <li>
      <span class="radius_bg"></span>
      <div>
        <span class="radius_name">DARALA 6 7/8 04/10/22 Corp,</span>
        <span class="radius_sum"> 16 502,04 $,</span>
        <span class="radius_proc"> 2.53%</span>
      </div>
    </li>

    <li>
      <span class="radius_bg"></span>
      <div>
        <span class="radius_name">DIALIN 6 ? 10/31/26 Corp,</span>
        <span class="radius_sum"> 16 502,04 $,</span>
        <span class="radius_proc"> 2.53%</span>
      </div>
    </li>

    <li>
      <span class="radius_bg"></span>
      <div>
        <span class="radius_name">TURKTI 4 ? 06/19/24,</span>
        <span class="radius_sum"> 16 502,04 $,</span>
        <span class="radius_proc"> 2.53%</span>
      </div>
    </li>

    <li>
      <span class="radius_bg"></span>
      <div>
        <span class="radius_name">JBSSBZ 7 01/15/26 Corp,</span>
        <span class="radius_sum"> 16 502,04 $,</span>
        <span class="radius_proc"> 2.53%</span>
      </div>
    </li>

    <li>
      <span class="radius_bg"></span>
      <div>
        <span class="radius_name">JSLGBZ 7 3/4 07/26/24 Corp,</span>
        <span class="radius_sum"> 16 502,04 $,</span>
        <span class="radius_proc"> 2.53%</span>
      </div>
    </li>

    <li>
      <span class="radius_bg"></span>
      <div>
        <span class="radius_name">INDYIJ 5 7/8 11/09/24 Corp,</span>
        <span class="radius_sum"> 16 502,04 $,</span>
        <span class="radius_proc"> 2.53%</span>
   ...

CSS

.new__li li {
  display: block;
  width: 49%;
  float: left;
  list-style: none;
}

li {
  padding: 5px 0;
  list-style: none;
}

li div {
  display: inline;
}

li span.radius_bg {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 15px;
  border-radius: 30px;
  padding: 0;
  background-color: rgb(241, 128, 27);
}

span.radius_name {
  width: 50%;
  padding-right: 5%;
  font-weight: 600;
}

span.radius_name:before {
  content: "Наименование: ";
  font-style: italic;
  font-weight: 500;
}

span.radius_sum {
  display: block;
  margin-left: 30px;
  font-weight: 600;
}

span.radius_sum:before {
  content: "Сумма: ";
  font-style: italic;
  font-weight: 500;
}

span.radius_proc {
  display: block;
  margin-left: 30px;
  color: rgb(218, 15, 69);
  font-weight: 600;
}

span.radius_proc:before {
  content: "Процентная доля: ";
  font-style: italic;
  font-weight: 500;
  color: #000;
}


li:nth-child(1) span.radius_bg {
  background-color: rgb(218, 15, 69);
}

li:nth-child(2) span.radius_bg {
  background-color: rgb(241, 128, 27);
}

li:nth-child(3) span.radius_bg {
  background-color: rgb(197, 210, 100);
}

li:nth-child(4) span.radius_bg {
  background-color: rgb(108, 216, 223);
}

li:nth-child(5) span.radius_bg {
  background-color: rgb(205, 204, 198);
}

li:nth-child(6) span.radius_bg {
  background-color: rgb(30, 14, 24);
}

li:nth-child(7) span.radius_bg {
  background-color: rgb(245, 103, 172);
}

li:nth-child(8) span.radius_bg {
  background-color: rgb(61, 195, 204);
}

li:nth-child(9) span.radius_bg {
  background-color: rgb(247, 179, 118);
}

li:nth-child(10) span.radius_bg {
  background-color: rgb(135, 119, 209);
}

JavaScript

if ($('#menu ul li').length >= 10) {
  $("#menu").addClass("new__li");
} else {}