JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list-number-bullet bullet-blue">
    <li><span class="jsn-listbullet">1</span>Item 1</li>
    <ul>
       <li>Item 2</li>
       <li>Item 3</li>
    </ul>
    <li><span class="jsn-listbullet">4</span>Item 4</li>
</ul>

CSS

ul.list-number-bullet-a li .jsn-listbullet {
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
}

ul.list-number-bullet {
      list-style: none;
}
ul.list-number-bullet li {
      margin-left: 0;
      position: relative;
      padding: 6px 0 6px 36px;
}
ul.list-number-bullet li .jsn-listbullet {
      color: #fff;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      margin: 4px;
      left: 0;
      top: 0px;
      width: 20px;
      display: block;
      font-weight: normal;
      position: absolute;
}

ul.list-number-bullet.bullet-blue li .jsn-listbullet {
      background: #0088CC;
}