JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">
  <h2>Unordered List with Sublist</h2>
  <ul>
    <li>Fruits
      <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
      </ul>
    </li>
    <li>Vegetables
      <ul>
        <li>Carrot</li>
        <li>Broccoli</li>
        <li>Spinach</li>
      </ul>
    </li>
    <li>Dairy
      <ul>
        <li>Milk</li>
        <li>Cheese</li>
        <li>Yogurt</li>
      </ul>
    </li>
  </ul>

  <h2>Ordered List with Sublist</h2>
  <ol>
    <li>Morning Routine
      <ol>
        <li>Wake up</li>
        <li>Brush Teeth</li>
        <li>Have Breakfast</li>
      </ol>
    </li>
    <li>Work Routine
      <ol>
        <li>Check Emails</li>
        <li>Attend Meetings</li>
        <li>Work on Projects</li>
      </ol>
    </li>
    <li>Evening Routine
      <ol>
        <li>Exercise</li>
        <li>Dinner</li>
        <li>Read a Book</li>
      </ol>
    </li>
  </ol>

  <h2>Mixed List with Unordered Sublist</h2>
  <ol>
    <li>Plan a Trip
      <ul>
        <li>Choose a destination</li>
        <li>Book flights</li>
        <li>Reserve accommodation</li>
      </ul>
    </li>
    <li>Prepare for Departure
      <ul>
        <li>Pack luggage
          <ul>
            <li>Clothes</li>
            <li>Toiletries</li>
            <li>Travel documents</li>
          </ul>
        </li>
        <li>Check travel advisories</li>
        <li>Arrange transportation to the airport</li>
      </ul>
    </li>
    <li>Enjoy the Trip
      <ul>
        <li>Visit tourist attractions</li>
        <li>Try local cuisine</li>
        <li>Take lots of photos</li>
      </ul>
    </li>
  </ol>

  <h2>Unordered List with Mixed Sublists</h2>
  <ul>
    <li>Education
      <ol>
        <li>Primary School
          <ul>
            <li>Grade...

CSS

html,
body {
  color: #F9F9F9;
  background: #090909;
}

.container {
  margin-top: 5%;
}

h2 {
  border-bottom: 1px solid #CCCCCC;
}


ul {
  list-style: disc inside;
}

ul li ul {
  list-style: circle;
}

ol {
  list-style: decimal;
}

ol li ol {
  list-style: upper-alpha;
}