JSFiddle - React, Tailwind, and code Playground

by Bouteille Dimitri

HTML

<div class="hand-bullet-list bullet-list-two-columns">
<p><strong>Committee<br />
</strong>Some text.</p>
<p style="font-weight: 400;"><strong>Members of Committee include</strong></p>
<ul style="font-weight: 400;">
  <li>Member 1</li>
  <li>Member 2</li>
  <li>Group 1
    <ul>
      <li>Group 1a</li>
      <li>Group 1b</li>
      <li>Group 1c</li>
      <li>Group 1d</li>
    </ul>
  </li>
    <li>Member 3</li>
    <li>Member 4</li>
    <li>Member 5</li>
</ul>

</div>

CSS

.hand-bullet-list ul{
    list-style-type: none;
    margin-left: 0px;
}

.hand-bullet-list ul li{
    list-style: none;
    position: relative;
    padding: 0 0 22px 40px;
    margin-bottom: 20px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.hand-bullet-list ul li::before{
    background: url(https://jeremybullocksafeschools.com/wp-content/uploads/3.png) no-repeat;
    content: "";
    width: 40px;
    height: 42px;
    position: absolute;
    left: 0px;
    top: 0px;
}

ul li:first-child::before {
  background-color: red;
}