JSFiddle - React, Tailwind, and code Playground

by Ivan

HTML

My To Do
<ul>
  <li>Hit the gym</li>
  <li>Pay bills</li>
  <li>Meet john</li>
  <li>Duy eggs</li>
  <li>Read a book</li>
  <li>Organize office</li>
  <li>Eat dinner</li>
  <li>Duy apples</li>
  <li>Meet George</li>
  <li>Feed the cat</li>
  <li>Write a letter</li>
  <li>Run 1 km</li>
</ul>

CSS

ul {
  list-style-image: url(https://i.ibb.co/1Yg1Sry/unchecked-16.png);
} 
li {
  background-color: #A5CCDA;
}
li:nth-child(even) {
  background-color: #ADD8E6;
}
li:nth-child(2),
li:nth-child(5),
li:nth-child(11)
{
  text-decoration: line-through;
  background-color: #E2E2E2;
  list-style-image: url(https://i.ibb.co/Tgjg5k9/checked-16.png);
}
li::after {
  content: "Ă—";
  color: red;
  text-decoration: none;
 }