JSFiddle - React, Tailwind, and code Playground

by Daniel Shin

HTML

<ul>
  <li  class='firstHead'>Type
    1
    <ul>
      <li>Outline</li>
      <li>MSL</li>
      <li>ESD</li>
      <li>Low</li>
      <li>Long..</li>
    </ul>
  </li>
  <li  class='firstHead'>Type2
    <ul>
      <li>Outline</li>
      <li>MSL</li>
      <li>ESD</li>
      <li>Low</li>
      <li>Long
        <ul>
          <li>UV Curing</li>
          <li>Medical</li>
          <li>Industrial</li>
          <li  class='firstHead'>Feaature
            <ul>
              <li>ROHS</li>
              <li>MSL</li>
              <li>ESD</li>
              <li>Low</li>
              <li>Long</li>
            </ul>
          </li>
          <li  class='firstHead'>Application
            <ul>
              <li>UV</li>
              <li>Me</li>
              <li>Industrial</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS

ul {
  list-style: none
}

li.firstHead {
  list-style-type: disc;
  font-size: 15px;
  font-weight: bold
}

li.firstHead>ul>li {
  list-style-type: circle;
  font-size: 12px;
  font-weight: normal
}