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 conçu avec le style Glassmorphism, des couleurs vives et une disposition simple, adaptée à un tableau de bord.
Retro_Industrial_Columns_Component
Un composant de colonnes complexe, vibrant, de style rétro/vintage pour les entreprises manufacturières/industrielles, présentant une esthétique des années 80/90 avec prise en charge du mode sombre et une réactivité totale.
Composante des colonnes brutalistes
Un composant complexe de colonnes au design brutaliste, avec une palette de couleurs monochromatiques, adapté à la consommation de blogs ou de contenu. Le design présente un contraste élevé, des mises en page inhabituelles et prend en charge le mode sombre.