JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<ul class="TabList">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

<ol class="TabList" screenshot_id="8">
  <li>Tab A</li>
  <li>Tab B</li>
  <li>Tab C</li>
</ol>

CSS

.TabList {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px; /* Adjust as needed */
  border: 1px solid #ccc;
}

.TabList li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  background-color: #f9f9f9;
}

.TabList li:last-child {
  border-bottom: none;
}

ul.TabList {
  list-style: none; /* Remove bullets for ul */
}

ol.TabList {
  list-style: decimal inside; /* Keep numbers inside for ol */
}