Composant de la table des matières
Un composant de table des matières simple et réactif avec des effets de néon/lueur et une palette de couleurs d’automne, adapté aux portfolios ou aux galeries de photographie, y compris la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md lg:max-w-lg bg-gradient-to-br from-amber-800 via-orange-900 to-red-900 dark:from-gray-800 dark:via-gray-900 dark:to-black rounded-lg shadow-xl overflow-hidden p-6 relative group transform hover:scale-[1.01] transition-all duration-300 ease-in-out border-2 border-transparent hover:border-amber-500/50 dark:hover:border-purple-600/50">
<!-- Glow Effect Overlay -->
<div class="absolute inset-0 bg-amber-500/20 dark:bg-purple-500/20 rounded-lg opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-500 pointer-events-none"></div>
<div class="absolute inset-0.5 bg-amber-300/10 dark:bg-purple-300/10 rounded-lg opacity-0 group-hover:opacity-100 group-hover:blur-md transition-opacity duration-700 pointer-events-none"></div>
<div class="relative z-10">
<h2 class="text-2xl sm:text-3xl font-extrabold text-amber-200 dark:text-purple-300 mb-6 text-center tracking-wide" style="text-shadow: 0 0 10px rgba(251, 191, 36, 0.7), 0 0 20px rgba(251, 191, 36, 0.4); dark:text-shadow: 0 0 10px rgba(168, 85, 247, 0.7), 0 0 20px rgba(168, 85, 247, 0.4);">
GALLERY SECTIONS
</h2>
<nav aria-label="Gallery Sections Table of Contents">
<ul class="space-y-4">
<li>
<a href="#landscapes" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Landscapes
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
<li>
<a href="#portraits" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Portraits
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
<li>
<a href="#wildlife" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Wildlife
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
<li>
<a href="#abstract" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Abstract
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
<li>
<a href="#events" class="block p-3 rounded-md text-amber-100 dark:text-purple-200 hover:bg-amber-700/60 dark:hover:bg-purple-800/60 transition-colors duration-200 relative overflow-hidden group/item focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-purple-400"
style="box-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<span class="relative z-10 font-medium text-lg leading-tight block">
Events
<span class="absolute top-0 left-0 w-full h-full bg-amber-500/30 dark:bg-purple-500/30 blur-md opacity-0 group-hover/item:opacity-70 transition-opacity duration-300 glow-pulse"></span>
</span>
</a>
</li>
</ul>
</nav>
<div class="mt-6 text-center text-amber-300 dark:text-purple-400 text-sm opacity-80" style="text-shadow: 0 0 5px rgba(251, 191, 36, 0.3); dark:text-shadow: 0 0 5px rgba(168, 85, 247, 0.3);">
<p>© 2023 Photonix Photography</p>
</div>
</div>
</div>
</div>
<style>
/* This is a simple keyframe animation for the glow-pulse effect on hover */
/* It's included directly as Tailwind doesn't support custom keyframe animations through classes alone */
@keyframes glow-pulse {
0% { transform: scale(0.95); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(0.95); opacity: 0.7; }
}
.glow-pulse {
animation: glow-pulse 1.5s infinite alternate;
}
/* Dark mode specific glow-pulse for visual distinctiveness */
.dark .glow-pulse {
animation: glow-pulse-dark 1.5s infinite alternate;
}
@keyframes glow-pulse-dark {
0% { transform: scale(0.95); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(0.95); opacity: 0.7; }
}
</style>Composants associés
Table des matières Composant - Tons de terre 3D
Un composant complexe de table des matières inspiré de la 3D pour les sites Web d’entreprise et d’entreprise, avec des tons de terre et une réactivité totale avec prise en charge du mode sombre. Conçu pour offrir de la profondeur et de l’engagement.
Composant de la table des matières - Réservation/Réservation
Un composant de table des matières simple et réactif pour les systèmes de réservation, avec des couleurs en niveaux de gris et des transitions de dégradé subtiles. Inclut la prise en charge du mode sombre.
Table des matières
Composant de table des matières avec conception de micro-interactions, schéma de couleurs analogue, complexité simple et objectif de médias sociaux. Réactif avec prise en charge du thème sombre. Pas de code JavaScript.