Luxury_Dating_Columns_Component
Un componente de diseño simple y elegante de tres columnas para plataformas de citas/redes sociales, con una estética de lujo con una paleta de colores negro, blanco y acento, capacidad de respuesta total y compatibilidad con modo oscuro.
Código HTML
<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>Componentes relacionados
Componente Columnas
Un componente de columnas responsivo diseñado en un estilo brutalista con tonos tierra, adaptado para el comercio electrónico, con complejidad media y soporte para temas oscuros.
Componente Columnas
Un componente de columna simple y receptivo para comercio electrónico, con influencias de Material Design, colores en escala de grises y compatibilidad con el modo oscuro.
Columnas Componente 49
Un componente de columnas responsivo con un diseño esqueuomórfico que imita elementos del mundo real, con soporte para temas oscuros y uso de Tailwind CSS.