3D_Music_TOC_Component
Un composant de table des matières complexe, à contraste élevé, inspiré de la 3D pour les plates-formes musicales/audio, doté d’un design réactif et d’une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-900 to-indigo-900 min-h-screen font-sans dark:from-gray-900 dark:to-black text-gray-100">
<!-- Outer 3D Container -->
<div class="max-w-6xl mx-auto backdrop-blur-sm bg-purple-800/30 dark:bg-gray-800/30 rounded-3xl p-4 sm:p-6 lg:p-10 shadow-[0_20px_50px_rgba(0,0,0,0.8)] relative overflow-hidden ring-2 ring-purple-500/50 dark:ring-gray-600/50">
<!-- Decorative light aura -->
<div class="absolute top-0 left-0 w-full h-full pointer-events-none rounded-3xl" style="background: radial-gradient(circle at 10% 10%, rgba(139, 92, 246, 0.2) 0%, transparent 50%), radial-gradient(circle at 90% 90%, rgba(239, 68, 68, 0.1) 0%, transparent 50%);"></div>
<!-- Inner Content Area -->
<div class="relative z-10">
<header class="mb-8 text-center">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-2 text-white drop-shadow-[0_4px_3px_rgba(0,0,0,0.5)] leading-tight">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-300 via-pink-300 to-red-300">🎧 Playlists & Tracks 🎧</span>
</h1>
<p class="text-lg sm:text-xl text-purple-200 dark:text-gray-300 mb-6 drop-shadow-[0_2px_2px_rgba(0,0,0,0.4)]">
Dive into a universe of sound. Explore our curated collections.
</p>
<!-- Search Bar with 3D Effect -->
<div class="relative max-w-xl mx-auto group">
<input type="text" placeholder="Search playlists or songs..." class="w-full p-3 pl-12 rounded-full bg-purple-700/60 dark:bg-gray-700/60 text-white placeholder-purple-200 dark:placeholder-gray-300 focus:outline-none focus:ring-4 focus:ring-purple-400/70 dark:focus:ring-gray-500/70 shadow-lg transition-all duration-300 transform perspective-1000 rotateX-0 group-hover:rotateX-5 group-hover:shadow-[0_15px_30px_rgba(0,0,0,0.6)]">
<svg class="absolute left-4 top-1/2 -translate-y-1/2 w-6 h-6 text-purple-300 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Sidebar: Categories/Genres (3D Elevated) -->
<aside class="bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl p-6 shadow-[0_10px_30px_rgba(0,0,0,0.5)] overflow-hidden relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
<h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Genres & Moods</h2>
<ul class="space-y-4">
<li class="relative">
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-compact-disc mr-3"></i>Pop Hits</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">345</span>
</a>
</li>
<li>
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-guitar mr-3"></i>Rock Anthems</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">210</span>
</a>
</li>
<li>
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-headphones mr-3"></i>Electronic Vibes</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">188</span>
</a>
</li>
<li>
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-microphone-alt mr-3"></i>Soulful R&B</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">120</span>
</a>
</li>
<li>
<a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
<span><i class="fa-solid fa-drum mr-3"></i>Hip-Hop Grooves</span>
<span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">98</span>
</a>
</li>
</ul>
<!-- Featured Artist (Mini-card) -->
<div class="mt-8 p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.02] relative z-10">
<h3 class="text-lg font-bold text-white mb-3 flex items-center justify-center"><i class="fa-solid fa-star mr-2 text-yellow-400"></i>Featured Artist</h3>
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Artist Avatar" class="w-20 h-20 rounded-full mx-auto mb-3 border-4 border-purple-400 dark:border-gray-500 shadow-md object-cover">
<p class="text-lg font-semibold text-purple-100 dark:text-gray-200">Lunar Tones</p>
<a href="#" class="mt-3 inline-block bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-bold shadow-md transition-all duration-200 transform active:scale-95">View Profile</a>
</div>
</aside>
<!-- Main Content: Playlist Sections (Layered 3D Cards) -->
<main class="lg:col-span-2 space-y-8">
<!-- Recently Played -->
<section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
<h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Recently Played <i class="fa-solid fa-history ml-2"></i></h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<!-- Playlist Card 1 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1040/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Chill Lofi Jams</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">45 tracks</p>
<button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
</div>
<!-- Playlist Card 2 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1043/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Workout Energy</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">60 tracks</p>
<button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
</div>
<!-- Playlist Card 3 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1045/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Morning Acoustic</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">30 tracks</p>
<button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
</div>
</div>
</section>
<!-- New Releases -->
<section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
<h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">New Releases <i class="fa-solid fa-fire ml-2 text-orange-400"></i></h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<!-- Album Card 1 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1025/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">City Lights</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">By Starlight Echoes</p>
<button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
</div>
<!-- Album Card 2 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1029/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Oceanic Depths</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">By Aqua Waves</p>
<button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
</div>
<!-- Album Card 3 -->
<div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://picsum.photos/id/1031/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
<h3 class="text-lg font-semibold text-white mb-1">Forest Whispers</h3>
<p class="text-sm text-purple-200 dark:text-gray-300">By Green Groove</p>
<button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
</div>
</div>
</section>
<!-- Popular Artists -->
<section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
<h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Popular Artists <i class="fa-solid fa-users ml-2"></i></h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<!-- Artist Card 1 -->
<a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
<p class="text-lg font-semibold text-white">Eleanor Ray</p>
<p class="text-sm text-purple-200 dark:text-gray-300">Pop/R&B</p>
</a>
<!-- Artist Card 2 -->
<a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
<p class="text-lg font-semibold text-white">Jaxson Cole</p>
<p class="text-sm text-purple-200 dark:text-gray-300">Hip-Hop</p>
</a>
<!-- Artist Card 3 -->
<a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
<p class="text-lg font-semibold text-white">Seraphina</p>
<p class="text-sm text-purple-200 dark:text-gray-300">Electronic</p>
</a>
<!-- Artist Card 4 -->
<a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
<p class="text-lg font-semibold text-white">Rhythmic Soul</p>
<p class="text-sm text-purple-200 dark:text-gray-300">Jazz/Funk</p>
</a>
</div>
</section>
</main>
</div>
<!-- Footer for additional navigation or info -->
<footer class="mt-12 text-center text-purple-200 dark:text-gray-400 border-t border-purple-500/50 dark:border-gray-600/50 pt-8">
<p class="text-sm mb-4">© 2023 AudioVerse. All rights reserved.</p>
<nav class="space-x-4">
<a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">About</a>
<a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">Contact</a>
<a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">Privacy</a>
</nav>
</footer>
</div>
</div>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom Styles for 3D Transform Properties (Tailwind can't do arbitrary transforms directly) -->
<style>
.perspective-1000 {
perspective: 1000px;
}
.rotateX-0 {
transform: rotateX(0deg);
}
.rotateX-5 {
transform: rotateX(5deg);
}
/* Dark mode toggle - For demonstration only, typically handled by JS */
.dark-mode-toggle {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #6d28d9;
color: white;
padding: 10px 15px;
border-radius: 9999px;
cursor: pointer;
font-size: 0.875rem;
z-index: 1000;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transition: background-color 0.2s ease-in-out;
}
.dark-mode-toggle.dark-mode {
background-color: #4b5563;
}
</style>
<script>
// This JavaScript is for dark mode toggle functionality demonstration only.
// In a real application, consider using localStorage and a more robust approach.
document.addEventListener('DOMContentLoaded', () => {
const toggleBtn = document.createElement('button');
toggleBtn.className = 'dark-mode-toggle';
toggleBtn.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
document.body.appendChild(toggleBtn);
function applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
toggleBtn.innerHTML = '<i class="fas fa-sun"></i> Light Mode';
toggleBtn.classList.add('dark-mode');
} else {
document.documentElement.classList.remove('dark');
toggleBtn.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
toggleBtn.classList.remove('dark-mode');
}
}
// Check local storage for theme preference
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
applyTheme(currentTheme);
toggleBtn.addEventListener('click', () => {
let theme = '';
if (document.documentElement.classList.contains('dark')) {
theme = 'light';
} else {
theme = 'dark';
}
localStorage.setItem('theme', theme);
applyTheme(theme);
});
});
</script>
</div>Composants associés
Table des matières Composante 34
Un composant de table des matières réactif conçu avec Material Design, avec prise en charge du thème sombre et utilisant Tailwind CSS.
Composant de la table des matières
Un composant de table des matières simple, dynamique et réactif avec une sensation de conception 3D, adapté aux sites Web de voyage/tourisme, y compris la prise en charge du mode sombre.
Composant de la table des matières
Un composant de table des matières minimaliste et réactif doté d’un style CSS Tailwind, prenant en charge le mode sombre et présentant des éléments de conception épurés.