Skip to content

Weekly class schedule

A studio or school's weekly timetable, filterable by discipline and level, with remaining places and a day-by-day view on mobile.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Built for a gym, a dance or a music school: each class shows time, level, teacher, room and remaining places, with a fill gauge and a Last place or Full label. Two filter groups (discipline, level) and a Hide full classes checkbox combine; a status region announces how many classes are shown and each empty day says so. On desktop the week shows as six columns; below 768 px it becomes day-by-day tabs that show how many classes remain after filtering, opened on the current day. Discipline colors are CSS variables that are easy to change. Accessibility: filters are toggle buttons (aria-pressed), ARIA tabs with arrow, Home and End keys, place information never relies on color alone, AA contrast in light and dark modes, transitions disabled with prefers-reduced-motion. Without JavaScript the whole week stays readable.

Code

Loading the code…

Archive contents

planning-cours-hebdomadaire-html-tailwind.zip3 files · 7 Ko

  • index.html39 Ko
  • README.md4 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 16, 2026.

In the same spirit

  • A data table where every column sorts with a click, ascending or descending, with no library.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A real table on large screens whose rows each become a readable card on mobile, with no horizontal scrolling and no JavaScript.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • The full cart page: keyboard-editable quantities, undoable removal, promo code, free-delivery gauge and totals recalculated then announced.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A faceted filter panel for a catalog: category, price, size, colour and stock, with a result counter, active filter chips, sorting and a mobile drawer.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component