Bandeau d'ouverture en direct
Une pastille « Ouvert / Fermé » pour l'en-tête du site, calculée à l'heure de la boutique, avec jours fériés français, fermetures exceptionnelles et prochaine ouverture.
- Tailwind
- React
- CSS
- WordPress
Description
La pastille se place à côté du menu et indique en direct « Ouvert », « Ferme bientôt » ou « Fermé » avec l'heure de la prochaine ouverture, même au-delà d'un jour férié ou d'une période de congés. L'heure est toujours celle de Paris, quel que soit le fuseau du visiteur. Les onze jours fériés nationaux sont calculés automatiquement chaque année (Pâques, Ascension et Pentecôte comprises), avec une option pour l'Alsace-Moselle ; les fermetures exceptionnelles se déclarent par de simples dates. Un clic ouvre le détail : horaires de la semaine avec le jour courant signalé, fermetures à venir et numéro de téléphone. Accessibilité : élément details natif utilisable au clavier, Échap pour refermer avec retour du focus, tableau avec en-têtes de ligne et aria-current sur le jour courant, contrastes AA en clair comme en sombre, pulsation désactivée avec prefers-reduced-motion. Sans JavaScript, les horaires restent lisibles.
Code
Chargement du code…
Contenu de l'archive
bandeau-horaires-ouverture-html-tailwind.zip3 fichiers · 8 Ko
- index.html20 Ko
- README.md4 Ko
- LICENSE.md1 Ko
Mots-clés
Mis à jour le 16 octobre 2026.
Dans le même esprit

Un bouton flottant qui apparaît après un défilement, remonte en douceur en haut de page et montre la progression de lecture.
- Tailwind
- React
- CSS
- WordPress

Sommaire de page
GratuitUne table des matières qui suit la lecture d'un long article et surligne la section en cours.
- Tailwind
- React
- CSS
- WordPress

Pagination
GratuitUne pagination complète avec page courante, points de suspension et flèches précédent/suivant correctement désactivées.
- Tailwind
- React
- CSS
- WordPress

Menu déroulant
GratuitUne barre de navigation avec sous-menus déroulants qui se ferment à la touche Échap, au clic extérieur ou quand le focus quitte le menu.
- Tailwind
- React
- CSS
- WordPress