Planning de cours hebdomadaire
Le planning de la semaine d'un studio ou d'une école, filtrable par discipline et par niveau, avec les places restantes et une vue jour par jour sur mobile.
- Tailwind
- React
- CSS
- WordPress
Description
Pensé pour une salle de sport, une école de danse ou de musique : chaque cours affiche horaire, niveau, professeur, salle et places restantes, avec une jauge de remplissage et la mention « Dernière place » ou « Complet ». Deux groupes de filtres (discipline, niveau) et une case « Masquer les cours complets » se combinent ; une zone de statut annonce le nombre de cours affichés et chaque jour vide l'indique. Sur ordinateur, la semaine s'affiche en six colonnes ; sous 768 px, elle devient des onglets jour par jour qui montrent le nombre de cours restant après filtrage, ouverts sur le jour courant. Les couleurs de discipline passent par des variables CSS faciles à changer. Accessibilité : filtres en boutons à état (aria-pressed), onglets ARIA avec flèches, Début et Fin, l'information de places n'est jamais portée par la seule couleur, contrastes AA en clair comme en sombre, transitions coupées avec prefers-reduced-motion. Sans JavaScript, toute la semaine reste lisible.
Code
Chargement du code…
Dans le même esprit

Tableau triable
GratuitUn tableau de données dont chaque colonne se trie d'un clic, par ordre croissant ou décroissant, sans bibliothèque.
- Tailwind
- React
- CSS
- WordPress

Tableau en cartes sur mobile
GratuitUn vrai tableau sur grand écran dont chaque ligne devient une carte lisible sur mobile, sans défilement horizontal ni JavaScript.
- Tailwind
- React
- CSS
- WordPress

Panier avec quantités
GratuitLa page panier complète : quantités modifiables au clavier, retrait annulable, code promo, jauge de livraison offerte et totaux recalculés puis annoncés.
- Tailwind
- React
- CSS
- WordPress

Un panneau de filtres à facettes pour un catalogue : catégorie, prix, taille, couleur et stock, avec compteur de résultats, puces des filtres actifs, tri et tiroir sur mobile.
- Tailwind
- React
- CSS
- WordPress