JSFiddle - React, Tailwind, and code Playground

by Maxim_Wolf

HTML

<ul>
  <li class="overdue">
    <span>Overdue Courses/Learning Paths</span>
    <ul>
      <li>color: #BA1A1A</li>
      <li>background-color: #FFDAD6</li>
    </ul>
  </li>
  <li class="not-compliant">
    <span>Not Compliant</span>
    <ul>
    <li>color: #BA1A1A</li>
    <li>background-color: #FFDAD6</li>
    </ul>
  </li>
  <li class="retake">
    <span>
      Compliance retake period
    </span>
    <ul>
    <li>color: #BA1A1A</li>
    <li>background-color: #FFDAD6</li>
    </ul>
  </li>
  <li class="completed">
    <span>Completed</span>
    <ul>
      <li>color: #32363A</li>
      <li>background-color: #D9E2FF</li>
    </ul>
  </li>
   <li class="compliant">
    <span>Compliant</span>
    <ul>
    <li>color: #32363A</li>
    <li>background-color: #D9E2FF</li>
    </ul>
  </li>
 <li class="in-progress">
    <span>In Progress</span>
    <ul>
      <li>color: #32363A</li>
      <li>background-color: #ECEEEF</li>
    </ul>
  </li>
  <li class="not-started">
    <span>Not Started</span>
    <ul>
      <li>color: #32363A</li>
      <li>background-color: #ECEEEF</li>
    </ul>
  </li>
</ul>

CSS

.in-progress {
  color: #32363A;
  background-color: #ECEEEF;
}

.completed {
  color: #32363A;
  background-color: #D9E2FF;
}

.not-started {
  color: #32363A;
  background-color: #ECEEEF;
}

.overdue {
  color: #BA1A1A;
  background-color: #FFDAD6;
}

.compliant {
  color: #32363A;
  background-color: #D9E2FF;
}

.not-compliant {
  color: #BA1A1A;
  background-color: #FFDAD6;
}

.retake {
  color: #BA1A1A;
  background-color: #FFDAD6;
}