Bootstrap 5
Accordions
Tailwind
Template
Html
Integration Accordions
Dashboard
Accordions Tailwind optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Accordions Tailwind 2026 23040042 | AngularForAll</title>
<!-- Tailwind via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Police Inter & Police Display -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome pour icônes (option) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* { font-family: 'Inter', sans-serif; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
body {
background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
padding: 2rem 1.5rem;
}
/* Animation pour les accordéons */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content.active {
max-height: 500px;
}
/* Style pour les checkboxes custom */
.accordion-checkbox {
display: none;
}
.accordion-checkbox:checked ~ .accordion-content {
max-height: 500px;
}
.accordion-checkbox:checked ~ label .fa-chevron-down {
transform: rotate(180deg);
}
.fa-chevron-down {
transition: transform 0.3s ease;
}
</style>
</head>
<body class="antialiased">
<div class="max-w-7xl mx-auto">
<!-- En-tête -->
<div class="text-center mb-12">
<h1 class="text-5xl md:text-6xl font-extrabold mb-4">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500">
10 Accordéons
</span>
<span class="text-white/90 ml-3 font-light">Tailwind</span>
</h1>
<p class="text-slate-400 text-lg max-w-2xl mx-auto font-light tracking-wide">
Designs innovants · Animations fluides · Expériences uniques
</p>
</div>
<!-- Grille d'accordéons -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 1. Glassmorphism Moderne -->
<div class="bg-white/5 backdrop-blur-xl rounded-3xl p-6 border border-white/10 shadow-2xl hover:shadow-cyan-500/5 transition-all duration-300">
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center text-white font-bold shadow-lg shadow-cyan-500/20">1</span>
<h2 class="text-xl font-semibold text-white tracking-tight">Glassmorphism</h2>
</div>
<div class="space-y-3">
<div class="bg-white/5 rounded-2xl overflow-hidden border border-white/5">
<input type="checkbox" id="glass1" class="accordion-checkbox peer" checked>
<label for="glass1" class="flex items-center justify-between p-4 cursor-pointer hover:bg-white/10 transition-colors">
<span class="text-white font-medium flex items-center gap-2"><i class="fas fa-cloud text-cyan-400"></i> Cloud Sync</span>
<i class="fas fa-chevron-down text-cyan-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 bg-black/20 px-4">
<p class="text-slate-300 text-sm py-3 border-t border-white/5">Synchronisation en temps réel sur tous vos appareils. Données chiffrées de bout en bout.</p>
</div>
</div>
<div class="bg-white/5 rounded-2xl overflow-hidden border border-white/5">
<input type="checkbox" id="glass2" class="accordion-checkbox peer">
<label for="glass2" class="flex items-center justify-between p-4 cursor-pointer hover:bg-white/10 transition-colors">
<span class="text-white font-medium flex items-center gap-2"><i class="fas fa-shield-alt text-blue-400"></i> Sécurité</span>
<i class="fas fa-chevron-down text-blue-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 bg-black/20 px-4">
<p class="text-slate-300 text-sm py-3 border-t border-white/5">Authentification 2FA, chiffrement AES-256 et audits de sécurité réguliers.</p>
</div>
</div>
</div>
</div>
<!-- 2. Minimaliste Épuré -->
<div class="bg-white rounded-3xl p-6 shadow-xl border border-slate-100">
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 rounded-xl bg-slate-900 flex items-center justify-center text-white font-bold">2</span>
<h2 class="text-xl font-semibold text-slate-800 tracking-tight">Minimaliste</h2>
</div>
<div class="divide-y divide-slate-200">
<div class="py-2">
<input type="checkbox" id="mini1" class="accordion-checkbox peer" checked>
<label for="mini1" class="flex items-center justify-between py-3 cursor-pointer">
<span class="font-medium text-slate-700">Philosophie du design</span>
<i class="fas fa-plus text-slate-400 text-sm peer-checked:hidden"></i>
<i class="fas fa-minus text-slate-900 text-sm hidden peer-checked:inline"></i>
</label>
<div class="accordion-content peer-checked:max-h-40">
<p class="text-slate-500 text-sm pb-3">Moins c'est plus. Chaque élément doit avoir une raison d'être et contribuer à l'expérience.</p>
</div>
</div>
<div class="py-2">
<input type="checkbox" id="mini2" class="accordion-checkbox peer">
<label for="mini2" class="flex items-center justify-between py-3 cursor-pointer">
<span class="font-medium text-slate-700">Principes clés</span>
<i class="fas fa-plus text-slate-400 text-sm peer-checked:hidden"></i>
<i class="fas fa-minus text-slate-900 text-sm hidden peer-checked:inline"></i>
</label>
<div class="accordion-content peer-checked:max-h-40">
<p class="text-slate-500 text-sm pb-3">Clarté, simplicité, hiérarchie visuelle et espace négatif généreux.</p>
</div>
</div>
</div>
</div>
<!-- 3. Néon Cyberpunk -->
<div class="bg-gradient-to-br from-purple-950/90 to-black rounded-3xl p-6 border border-purple-500/30 shadow-2xl shadow-purple-500/10">
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 rounded-xl bg-gradient-to-r from-pink-500 to-purple-500 flex items-center justify-center text-white font-bold shadow-lg shadow-pink-500/30">3</span>
<h2 class="text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-purple-400">Néon Cyberpunk</h2>
</div>
<div class="space-y-4">
<div class="group">
<input type="checkbox" id="neon1" class="accordion-checkbox peer" checked>
<label for="neon1" class="flex items-center justify-between p-4 bg-purple-900/30 rounded-xl cursor-pointer border border-pink-500/20 peer-checked:border-pink-500/50 transition-all">
<span class="text-pink-300 font-medium flex items-center gap-2"><i class="fas fa-microchip"></i> Neural Interface</span>
<i class="fas fa-chevron-down text-pink-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 mt-2">
<div class="bg-black/40 rounded-xl p-4 border border-purple-500/20">
<p class="text-purple-200 text-sm">Connexion directe cerveau-machine. Latence < 1ms. Compatible Neuralink.</p>
</div>
</div>
</div>
<div class="group">
<input type="checkbox" id="neon2" class="accordion-checkbox peer">
<label for="neon2" class="flex items-center justify-between p-4 bg-purple-900/30 rounded-xl cursor-pointer border border-cyan-500/20 peer-checked:border-cyan-500/50 transition-all">
<span class="text-cyan-300 font-medium flex items-center gap-2"><i class="fas fa-database"></i> Data Vault</span>
<i class="fas fa-chevron-down text-cyan-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 mt-2">
<div class="bg-black/40 rounded-xl p-4 border border-cyan-500/20">
<p class="text-cyan-200 text-sm">Stockage quantique illimité. Accès instantané à vos souvenirs numériques.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 4. Brutaliste -->
<div class="bg-amber-50 rounded-none p-6 border-4 border-amber-900 shadow-[8px_8px_0px_0px_rgba(120,53,15,0.5)]">
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 bg-amber-900 flex items-center justify-center text-amber-50 font-bold border-2 border-amber-950">4</span>
<h2 class="text-xl font-black text-amber-950 uppercase tracking-wider">Brutaliste</h2>
</div>
<div class="space-y-3">
<div class="border-2 border-amber-900">
<input type="checkbox" id="brut1" class="accordion-checkbox peer" checked>
<label for="brut1" class="flex items-center justify-between p-4 cursor-pointer bg-amber-100 hover:bg-amber-200 transition-colors border-b-2 border-amber-900 peer-checked:border-b-0">
<span class="font-black text-amber-950"><i class="fas fa-cube mr-2"></i> RAW DESIGN</span>
<i class="fas fa-arrow-down text-amber-900 font-bold"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 bg-amber-50">
<p class="text-amber-900 font-medium p-4 text-sm">Aucune fioriture. Uniquement l'essentiel. Impact visuel maximal avec contraste fort.</p>
</div>
</div>
<div class="border-2 border-amber-900">
<input type="checkbox" id="brut2" class="accordion-checkbox peer">
<label for="brut2" class="flex items-center justify-between p-4 cursor-pointer bg-amber-100 hover:bg-amber-200 transition-colors border-b-2 border-amber-900 peer-checked:border-b-0">
<span class="font-black text-amber-950"><i class="fas fa-bolt mr-2"></i> ANTI-TENDANCE</span>
<i class="fas fa-arrow-down text-amber-900 font-bold"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 bg-amber-50">
<p class="text-amber-900 font-medium p-4 text-sm">Contre le design aseptisé. Affirmation d'une identité visuelle forte et mémorable.</p>
</div>
</div>
</div>
</div>
<!-- 5. Neumorphisme -->
<div class="bg-[#e0e5ec] rounded-3xl p-6 shadow-[9px_9px_16px_#a3b1c6,-9px_-9px_16px_#ffffff]">
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 rounded-xl bg-[#e0e5ec] flex items-center justify-center font-bold shadow-[3px_3px_6px_#a3b1c6,-3px_-3px_6px_#ffffff] text-slate-600">5</span>
<h2 class="text-xl font-semibold text-slate-700">Neumorphisme</h2>
</div>
<div class="space-y-4">
<div>
<input type="checkbox" id="neu1" class="accordion-checkbox peer" checked>
<label for="neu1" class="flex items-center justify-between p-4 cursor-pointer rounded-2xl shadow-[5px_5px_10px_#a3b1c6,-5px_-5px_10px_#ffffff] mb-2">
<span class="font-medium text-slate-600"><i class="fas fa-circle text-emerald-500 mr-2 text-xs"></i> Soft UI</span>
<i class="fas fa-chevron-down text-slate-500 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40">
<div class="rounded-2xl shadow-[inset_5px_5px_10px_#a3b1c6,inset_-5px_-5px_10px_#ffffff] p-4">
<p class="text-slate-600 text-sm">Interface douce et tactile inspirée du skeuomorphisme moderne.</p>
</div>
</div>
</div>
<div>
<input type="checkbox" id="neu2" class="accordion-checkbox peer">
<label for="neu2" class="flex items-center justify-between p-4 cursor-pointer rounded-2xl shadow-[5px_5px_10px_#a3b1c6,-5px_-5px_10px_#ffffff] mb-2">
<span class="font-medium text-slate-600"><i class="fas fa-circle text-amber-500 mr-2 text-xs"></i> Profondeur</span>
<i class="fas fa-chevron-down text-slate-500 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40">
<div class="rounded-2xl shadow-[inset_5px_5px_10px_#a3b1c6,inset_-5px_-5px_10px_#ffffff] p-4">
<p class="text-slate-600 text-sm">Jeu d'ombres subtiles créant une impression de relief et de profondeur.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 6. Bordure Animée -->
<div class="bg-slate-900 rounded-3xl p-6 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center text-white font-bold">6</span>
<h2 class="text-xl font-semibold text-white">Bordure Animée</h2>
</div>
<div class="space-y-3 relative z-10">
<div class="border-l-4 border-emerald-400 hover:border-l-8 transition-all duration-300">
<input type="checkbox" id="anim1" class="accordion-checkbox peer" checked>
<label for="anim1" class="flex items-center justify-between p-4 cursor-pointer bg-slate-800/50 rounded-r-xl">
<span class="text-white font-medium"><i class="fas fa-rocket text-emerald-400 mr-2"></i> Lancement</span>
<i class="fas fa-chevron-down text-emerald-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 bg-slate-800/30">
<p class="text-slate-300 text-sm p-4">Déploiement continu avec une animation de bordure au survol du conteneur.</p>
</div>
</div>
<div class="border-l-4 border-blue-400 hover:border-l-8 transition-all duration-300">
<input type="checkbox" id="anim2" class="accordion-checkbox peer">
<label for="anim2" class="flex items-center justify-between p-4 cursor-pointer bg-slate-800/50 rounded-r-xl">
<span class="text-white font-medium"><i class="fas fa-wave-square text-blue-400 mr-2"></i> Animation</span>
<i class="fas fa-chevron-down text-blue-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 bg-slate-800/30">
<p class="text-slate-300 text-sm p-4">Transitions fluides et effets de survol subtils pour une expérience premium.</p>
</div>
</div>
</div>
</div>
<!-- 7. Carte à Grille -->
<div class="bg-gradient-to-br from-indigo-50 to-white rounded-3xl p-6 border border-indigo-100 shadow-lg">
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center text-white font-bold shadow-md shadow-indigo-200">7</span>
<h2 class="text-xl font-semibold text-indigo-950">Carte Grille</h2>
</div>
<div class="grid grid-cols-1 gap-2">
<div class="bg-white rounded-xl border border-indigo-100 overflow-hidden">
<input type="checkbox" id="grid1" class="accordion-checkbox peer" checked>
<label for="grid1" class="flex items-center justify-between p-4 cursor-pointer hover:bg-indigo-50/50">
<span class="font-medium text-indigo-900"><i class="fas fa-layer-group text-indigo-500 mr-2"></i> Composants</span>
<i class="fas fa-chevron-down text-indigo-400 text-sm transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 bg-indigo-50/30">
<p class="text-indigo-800 text-sm p-4">Bibliothèque de composants réutilisables et personnalisables.</p>
</div>
</div>
<div class="bg-white rounded-xl border border-indigo-100 overflow-hidden">
<input type="checkbox" id="grid2" class="accordion-checkbox peer">
<label for="grid2" class="flex items-center justify-between p-4 cursor-pointer hover:bg-indigo-50/50">
<span class="font-medium text-indigo-900"><i class="fas fa-code-branch text-indigo-500 mr-2"></i> Versions</span>
<i class="fas fa-chevron-down text-indigo-400 text-sm transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 bg-indigo-50/30">
<p class="text-indigo-800 text-sm p-4">Gestion sémantique des versions et documentation exhaustive.</p>
</div>
</div>
</div>
</div>
<!-- 8. Élégant Or -->
<div class="bg-gradient-to-br from-amber-900 to-yellow-900 rounded-3xl p-6 border border-yellow-600/30 shadow-2xl">
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 rounded-xl bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center text-amber-900 font-bold shadow-lg shadow-yellow-500/20">8</span>
<h2 class="text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 to-amber-100">Élégance Or</h2>
</div>
<div class="space-y-3">
<div class="bg-black/30 backdrop-blur-sm rounded-2xl border border-yellow-600/20 overflow-hidden">
<input type="checkbox" id="gold1" class="accordion-checkbox peer" checked>
<label for="gold1" class="flex items-center justify-between p-4 cursor-pointer hover:bg-yellow-900/20">
<span class="text-yellow-100 font-medium flex items-center gap-2"><i class="fas fa-crown text-yellow-400"></i> Premium</span>
<i class="fas fa-chevron-down text-yellow-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 border-t border-yellow-600/20">
<p class="text-yellow-100/80 text-sm p-4">Accès exclusif aux fonctionnalités avancées et support prioritaire.</p>
</div>
</div>
<div class="bg-black/30 backdrop-blur-sm rounded-2xl border border-yellow-600/20 overflow-hidden">
<input type="checkbox" id="gold2" class="accordion-checkbox peer">
<label for="gold2" class="flex items-center justify-between p-4 cursor-pointer hover:bg-yellow-900/20">
<span class="text-yellow-100 font-medium flex items-center gap-2"><i class="fas fa-gem text-yellow-400"></i> Conciergerie</span>
<i class="fas fa-chevron-down text-yellow-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 border-t border-yellow-600/20">
<p class="text-yellow-100/80 text-sm p-4">Service personnalisé disponible 24/7 pour répondre à tous vos besoins.</p>
</div>
</div>
</div>
</div>
<!-- 9. Pastel Doux -->
<div class="bg-gradient-to-br from-pink-50 via-rose-50 to-orange-50 rounded-3xl p-6 border border-pink-200/50 shadow-lg">
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-300 to-rose-300 flex items-center justify-center text-white font-bold shadow-md shadow-pink-200">9</span>
<h2 class="text-xl font-semibold text-rose-900">Pastel Douceur</h2>
</div>
<div class="space-y-2">
<div class="bg-white/70 backdrop-blur-sm rounded-2xl p-1">
<input type="checkbox" id="pastel1" class="accordion-checkbox peer" checked>
<label for="pastel1" class="flex items-center justify-between p-3 cursor-pointer">
<span class="font-medium text-rose-800"><i class="fas fa-heart text-pink-400 mr-2"></i> Bien-être</span>
<i class="fas fa-chevron-down text-pink-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40">
<p class="text-rose-700 text-sm p-3">Conseils et astuces pour une vie plus sereine et équilibrée.</p>
</div>
</div>
<div class="bg-white/70 backdrop-blur-sm rounded-2xl p-1">
<input type="checkbox" id="pastel2" class="accordion-checkbox peer">
<label for="pastel2" class="flex items-center justify-between p-3 cursor-pointer">
<span class="font-medium text-rose-800"><i class="fas fa-spa text-pink-400 mr-2"></i> Méditation</span>
<i class="fas fa-chevron-down text-pink-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40">
<p class="text-rose-700 text-sm p-3">Séances guidées de méditation et exercices de respiration.</p>
</div>
</div>
</div>
</div>
<!-- 10. Futuriste Holographique -->
<div class="bg-black rounded-3xl p-6 relative overflow-hidden border border-cyan-500/30 shadow-[0_0_30px_rgba(6,182,212,0.2)]">
<div class="absolute -inset-1 bg-gradient-to-r from-cyan-500/20 via-transparent to-blue-500/20 blur-xl"></div>
<div class="relative">
<div class="flex items-center gap-3 mb-5">
<span class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center text-white font-bold shadow-[0_0_15px_rgba(6,182,212,0.5)]">10</span>
<h2 class="text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-blue-300">Holographique</h2>
</div>
<div class="space-y-3">
<div class="backdrop-blur-xl bg-white/5 rounded-2xl border border-cyan-500/20 overflow-hidden">
<input type="checkbox" id="holo1" class="accordion-checkbox peer" checked>
<label for="holo1" class="flex items-center justify-between p-4 cursor-pointer hover:bg-cyan-500/10">
<span class="text-cyan-100 font-medium"><i class="fas fa-hologram text-cyan-400 mr-2"></i> Projection 3D</span>
<i class="fas fa-chevron-down text-cyan-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 border-t border-cyan-500/20">
<p class="text-cyan-100/80 text-sm p-4">Technologie holographique nouvelle génération pour des présentations immersives.</p>
</div>
</div>
<div class="backdrop-blur-xl bg-white/5 rounded-2xl border border-blue-500/20 overflow-hidden">
<input type="checkbox" id="holo2" class="accordion-checkbox peer">
<label for="holo2" class="flex items-center justify-between p-4 cursor-pointer hover:bg-blue-500/10">
<span class="text-blue-100 font-medium"><i class="fas fa-atom text-blue-400 mr-2"></i> Quantique</span>
<i class="fas fa-chevron-down text-blue-400 transition-transform"></i>
</label>
<div class="accordion-content peer-checked:max-h-40 border-t border-blue-500/20">
<p class="text-blue-100/80 text-sm p-4">Calculs quantiques pour des simulations ultra-rapides et précises.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-16 text-center">
<p class="text-slate-500 text-sm flex items-center justify-center gap-2">
<span class="w-1 h-1 bg-slate-500 rounded-full"></span>
10 designs d'accordéons uniques · Tailwind CSS pur · Aucun JavaScript externe
<span class="w-1 h-1 bg-slate-500 rounded-full"></span>
</p>
</div>
</div>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur