Industrial_Vibrant_Dating_Accordion
Un composant d’accordéon de style industriel modérément complexe avec des couleurs vives, adapté aux plateformes de rencontres et sociales. Comprend des éléments exposés, une typographie lourde et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 font-sans bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-10 tracking-tight text-red-600 dark:text-red-500 uppercase leading-snug">
<span class="block">Unlock Deep</span> Connections
</h2>
<div class="space-y-6 md:space-y-8">
<!-- Accordion Item 1 -->
<div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<input type="checkbox" id="accordion-1" class="hidden peer" />
<label for="accordion-1" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-red-600 to-amber-500 dark:from-red-700 dark:to-orange-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-red-800 dark:border-red-900 hover:opacity-90 transition-opacity duration-200">
<span class="flex items-center">
<svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
Who Are You Looking For?
</span>
<span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">+</span>
</label>
<div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-green-500 dark:peer-checked:border-green-600">
<p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
Define your ideal partner. Our intelligent matching algorithm goes beyond just looks, connecting you with individuals who share your passions, values, and life goals. Get specific about what truly matters.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Profile 1" class="w-12 h-12 rounded-full mr-4 border-2 border-red-500 dark:border-red-400 object-cover">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Adventure Seeker</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Loves hiking & travel.</p>
</div>
</div>
<div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profile 2" class="w-12 h-12 rounded-full mr-4 border-2 border-blue-500 dark:border-blue-400 object-cover">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Creative Soul</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Passionate about art & music.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<input type="checkbox" id="accordion-2" class="hidden peer" />
<label for="accordion-2" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-700 dark:to-cyan-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-blue-800 dark:border-blue-900 hover:opacity-90 transition-opacity duration-200">
<span class="flex items-center">
<svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" 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="M7 8h10M7 12h10m-9 4h4M4 16v-4a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2z"></path>
</svg>
How Does Matching Work?
</span>
<span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">+</span>
</label>
<div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-red-500 dark:peer-checked:border-red-600">
<p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
<span>Our proprietary algorithm uses a combination of personality assessments, shared interests, and behavioral data to suggest highly compatible matches. It's designed to foster genuine connections.</span>
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<img src="https://picsum.photos/300/200?random=1" alt="Matchmaking Process 1" class="w-full h-32 object-cover rounded-md border-2 border-blue-400 dark:border-blue-500 shadow-md">
<img src="https://picsum.photos/300/200?random=2" alt="Matchmaking Process 2" class="w-full h-32 object-cover rounded-md border-2 border-green-400 dark:border-green-500 shadow-md">
<img src="https://picsum.photos/300/200?random=3" alt="Matchmaking Process 3" class="w-full h-32 object-cover rounded-md border-2 border-purple-400 dark:border-purple-500 shadow-md">
</div>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<input type="checkbox" id="accordion-3" class="hidden peer" />
<label for="accordion-3" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-green-600 to-lime-500 dark:from-green-700 dark:to-lime-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-green-800 dark:border-green-900 hover:opacity-90 transition-opacity duration-200">
<span class="flex items-center">
<svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M7 20v-2m3-2H7m4-10v4m-4-4V9m-2-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 0V5a2 2 0 012-2h4a2 2 0 012 2v2m0 0H9"></path>
</svg>
Safety & Privacy Measures
</span>
<span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">+</span>
</label>
<div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-orange-500 dark:peer-checked:border-orange-600">
<p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
Your safety is our priority. We employ robust security protocols and strict privacy policies to ensure a secure and respectful environment for all users. Report any suspicious activity immediately.
</p>
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 text-md sm:text-lg">
<li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">✓</span> Encrypted Communication</li>
<li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">✓</span> Profile Verification</li>
<li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">✓</span> Anti-Scam Technology</li>
</ul>
</div>
</div>
</div>
</div>Composants associés
Accordéon en mode sombre (Finance/Banque)
Un composant d’accordéon simple, monochrome et sombre conçu pour les interfaces financières et bancaires. Il présente un design réactif et une prise en charge du mode sombre, en utilisant des nuances d’une seule couleur pour un look épuré.
Neumorphisme Accordéon Composant
Composant accordéon avec conception neumorphique, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant accordéon
Composant d’accordéon Glassmorphism avec des couleurs vives pour les médias sociaux, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, une interface riche avec plusieurs éléments interactifs, un design réactif et une prise en charge du thème sombre. Pas besoin de code JavaScript, seulement du HTML avec des classes Tailwind.