Luxury_Dating_Columns_Component
Un composant de mise en page simple et élégant à trois colonnes pour les plateformes de rencontres/sociales, doté d’une esthétique luxueuse avec une palette de couleurs noires, blanches et d’accentuation, une réactivité totale et une prise en charge du mode sombre.
HTML Code
<section class="py-12 md:py-20 lg:py-28 bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-50 font-serif overflow-hidden">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<div class="text-center mb-12 md:mb-16 lg:mb-20">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-4 dark:text-gray-50">
Find Your Perfect Match
</h2>
<p class="text-lg sm:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
Discover meaningful connections in a refined and exclusive environment.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 lg:gap-16">
<!-- Column 1: Discover -->
<div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
<div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
<img src="https://picsum.photos/300/300?random=1" alt="Discover Profiles" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
Explore Profiles
</h3>
<p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
Browse through a curated selection of sophisticated individuals looking for genuine connections.
</p>
</div>
<!-- Column 2: Connect -->
<div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
<div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Connect Seamlessly" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
Connect Seamlessly
</h3>
<p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
Initiate conversations with ease using our intuitive messaging system and elegant interface.
</p>
</div>
<!-- Column 3: Thrive -->
<div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
<div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
<img src="https://picsum.photos/300/300?random=2" alt="Build Relationships" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
Build Lasting Bonds
</h3>
<p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
Foster meaningful relationships that enrich your life and lead to a brighter future.
</p>
</div>
</div>
</div>
</section>Composants associés
Composant Colonnes
Un composant de colonnes réactives avec de petites animations attrayantes, adapté au e-commerce avec un thème sombre.
Composant Colonnes
Un composant de colonnes conçu avec le style Glassmorphism, des couleurs vives et une disposition simple, adaptée à un tableau de bord.
Colonnes Composant 49
Un composant de colonnes réactif avec un design skeuomorphe imitant les éléments du monde réel, avec la prise en charge du thème sombre et utilisant Tailwind CSS.