JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<ul>
  <li><span></span>Item 1</li>
  <li><span></span>Item 2</li>
  <li><span></span>Item 3</li>
  <li class="offline"><span></span>Item 4</li>
  <li><span></span>Item 5</li>
</ul>

SCSS

ul {
  list-style-type: none;
  li {
    span {
      display: inline-block;
      background-color: green;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      margin-right: 7px;
    }
    &.offline {
      span {
        background-color: red;
      }
    }
  }
}