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
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…
In the same spirit

Sortable table
FreeA data table where every column sorts with a click, ascending or descending, with no library.
- Tailwind
- React
- CSS
- WordPress

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

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

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