First, Last, Odd

Now let's look at the opening hours. They're a list in which each row is an li element with the day on the left and the hours on the right. Long lists like this are easier to read when every other row has a different background: your eyes don't slip to the wrong line.

Tailwind has variants for an element's position among its siblings, the children of the same parent:

Watch out: the class goes on every row, not on the list. Each row checks for itself whether it's odd (or the first, or the last), and only then does the class apply. That's why all the rows have the same classes, and when you add or remove a row, the stripes still take turns correctly.

<ul>
	<li class="odd:bg-stone-100">Monday</li>
	<li class="odd:bg-stone-100">Tuesday</li>
	<li class="odd:bg-stone-100">Wednesday</li>
</ul>

The rows are also separated by lines: each has a border at the bottom (border-b). The last row doesn't need one, because the list ends there anyway. The class last:border-b-0 removes the border from the last row only.