Films and Prices

Under the hero are this week's films. Mobile first, the three cards are one under another, and from 768 px up, they're in three columns:

<div class="mt-6 grid gap-6 md:grid-cols-3">

A grid without a grid-cols-* class has a single column, so on a phone, the cards are one under another, with gaps between them. Each card gets the look of a card from the lesson Borders, Shadows and Images. The three cards have the same classes: write them once and copy them, or select class="film", press Ctrl+D (on a Mac Cmd+D) until all three are selected, and change them at once.

The tables. The cells of the ticket prices need padding and a line under each row, and so do the cells of the showtimes table. In the cinema website project, one rule for th, td styled both tables. With Tailwind, every cell would need its classes, and the cells of the showtimes table are made by the script. For styles of plain elements like these, Tailwind has the layer base, the one where Preflight is. A rule there with @apply styles every cell on both pages, including the ones the script makes:

@layer base {
    th,
    td {
        @apply border-b border-stone-200 px-4 py-2 text-left;
    }
}

Utility classes win over it, as they win over Preflight, so a cell can still get a class of its own.