Social_Dating_Interactive_Component
A complex, interactive social/dating platform component designed with a clean, trustworthy corporate style using a purple/violet color scheme. Includes responsive layout and dark mode support.
HTML Code
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 font-sans">
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:flex md:items-center transform transition-all duration-300 hover:scale-[1.01]">
<!-- Left Section: Profile Card -->
<div class="w-full md:w-1/3 p-6 sm:p-8 border-b md:border-b-0 md:border-r border-gray-100 dark:border-gray-700 bg-gradient-to-br from-purple-50 dark:from-purple-950 to-purple-100 dark:to-gray-900 flex flex-col items-center justify-center">
<div class="relative w-32 h-32 rounded-full overflow-hidden mb-4 ring-4 ring-purple-400 dark:ring-purple-600 shadow-lg">
<img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Profile Picture">
<div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-2 border-white dark:border-gray-800 flex items-center justify-center">
<span class="text-white text-xs font-bold">✔</span>
</div>
</div>
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">Sophia Miller</h2>
<p class="text-lg text-purple-700 dark:text-purple-300 font-semibold mb-1 text-center">28, Software Engineer</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6 text-center">Based in New York City</p>
<div class="flex space-x-4 mb-6">
<button class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-600 hover:bg-purple-700 text-white transition duration-300 transform hover:scale-110 shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</button>
<button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-300 transform hover:scale-110 shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<button class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-300 hover:bg-gray-400 text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition duration-300 transform hover:scale-110 shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="w-full">
<label for="progress-match" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Compatibility Score</label>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
<div class="bg-gradient-to-r from-purple-400 to-purple-600 h-2.5 rounded-full" style="width: 75%"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center">75% Match Found</p>
</div>
</div>
<!-- Right Section: Interactive Elements -->
<div class="w-full md:w-2/3 p-6 sm:p-8 flex flex-col">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Discover More About Sophia</h3>
<!-- Interactive Tabs -->
<div class="mb-6">
<div class="relative flex flex-wrap gap-2 md:gap-0 bg-gray-100 dark:bg-gray-700 rounded-lg p-1 transition-colors duration-200">
<button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 active-tab">
About Me
</button>
<button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
Interests
</button>
<button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
Photos
</button>
<button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
Questions
</button>
<!-- Active tab indicator - controlled by JS in a real app, but for static HTML, it's just styling -->
<style>
.active-tab {
background-color: var(--tw-purple-600);
color: white;
box-shadow: var(--tw-shadow-lg);
}
.dark .active-tab {
background-color: var(--tw-purple-700);
}
@media (min-width: 768px) {
.active-tab {
background-color: var(--tw-purple-600);
color: white;
box-shadow: var(--tw-shadow-lg);
}
.dark .active-tab {
background-color: var(--tw-purple-700);
}
}
</style>
</div>
</div>
<!-- Tab Content: About Me -->
<div class="flex-grow mb-6">
<h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-3">Bio</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Passionate software engineer building scalable applications. Love exploring new technologies, hiking,
and discovering hidden gems in the city. Looking for someone who shares my curiosity and sense of adventure.
</p>
<h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-3">Lifestyle</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip="evenodd" />
</svg>
<span>Extrovert</span>
</div>
<div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip="evenodd" />
</svg>
<span>Non-smoker</span>
</div>
<div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17.07A8 8 0 012 19.5V20h16v-.5c0-.53-.093-1.054-.275-1.55l-1.071-1.07A3 3 0 0012.93 17.07z" />
</svg>
<span>Social Drinker</span>
</div>
<div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M7 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm.083 14h5.834V4h-5.834zM13 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1z" opacity=".4" />
<path fill-rule="evenodd" d="M7 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm.083 14h5.834V4h-5.834zM13 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
<span>Exercises weekly</span>
</div>
</div>
</div>
<!-- Call to Action / Interaction -->
<div class="mt-auto pt-6 border-t border-gray-100 dark:border-gray-700 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="flex-1 w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-md transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
Send Message
</button>
<button class="flex-1 w-full border border-purple-600 text-purple-600 dark:border-purple-400 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-gray-700 font-bold py-3 px-6 rounded-lg text-lg shadow-md transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
Suggest a Date
</button>
</div>
</div>
</div>
</div>Related Components
Interactive Components Component
Interactive Components Component with 3D Design, Monochromatic color scheme, and Moderate complexity for E-commerce, with responsive design and dark theme support.
Interactive Components Component
An interactive component designed in Brutalism style, suitable for showcasing work or products with dark theme support.
Interactive Components Component
A complex interactive component for social media with skeuomorphic design and monochromatic color scheme.