Componente de Componentes Sociales
Un componente social complejo de estilo industrial para sistemas de reservas y reservas, con neutros fríos, elementos expuestos y compatibilidad con el modo oscuro. Diseñado para sistemas de citas y reservas.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 font-sans">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Left Column: Profile Card & Activity Feed -->
<div class="md:col-span-1 space-y-6">
<!-- Profile Card -->
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden transition-all duration-300 transform hover:shadow-xl hover:-translate-y-1">
<div class="relative h-32 bg-gray-700 dark:bg-gray-950 flex items-center justify-center">
<img class="w-full h-full object-cover opacity-30" src="https://picsum.photos/600/300?random=1" alt="Cover Image">
<h2 class="absolute text-xl font-semibold text-gray-100 uppercase tracking-wider">Service Provider</h2>
</div>
<div class="p-6 pt-0 text-center -mt-16">
<img class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-800 inline-block object-cover shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture">
<h3 class="text-2xl font-bold mt-4 text-gray-900 dark:text-gray-100">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Industrial Design Expert</p>
<div class="flex justify-center gap-4 mt-4">
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white rounded-md text-sm font-medium transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="h-4 w-4 inline-block mr-1 -mt-0.5" 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="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"></path></svg>
Message
</button>
<button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100 rounded-md text-sm font-medium transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
<svg class="h-4 w-4 inline-block mr-1 -mt-0.5" 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-3-3H8a3 3 0 00-3 3v2H1m16-5h-3M19 8a2 2 0 11-4 0 2 2 0 014 0zM7 12V6a2 2 0 012-2h4a2 2 0 012 2v6m-6 4h6m-6-4H9a2 2 0 00-2 2v4a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2z"></path></svg>
Follow
</button>
</div>
<div class="mt-6 grid grid-cols-3 divide-x divide-gray-200 dark:divide-gray-700 text-sm">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">1.2K</p>
<p class="text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">350</p>
<p class="text-gray-500 dark:text-gray-400">Projects</p>
</div>
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">4.9/5</p>
<p class="text-gray-500 dark:text-gray-400">Rating</p>
</div>
</div>
</div>
</div>
<!-- Recent Activity Feed -->
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-6">
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">Recent Activity</h3>
<div class="space-y-4">
<div class="flex items-start">
<img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-medium">Sarah M.</span> booked an appointment on <span class="font-medium">Nov 15, 2023</span>.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<div class="flex items-start">
<img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/51.jpg" alt="User Avatar">
<div>
<p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-medium">Michael T.</span> left a 5-star review.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
</div>
</div>
<div class="flex items-start">
<img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div>
<p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-medium">Emily R.</span> confirmed her booking for <span class="font-medium">Dec 1, 2023</span>.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
</div>
</div>
</div>
</div>
</div>
<!-- Middle Column: Booking Interface -->
<div class="md:col-span-2 space-y-6">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-6">
<h3 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100 flex items-center">
<svg class="w-6 h-6 mr-2 text-blue-600 dark:text-blue-400" 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="M8 7V3m8 4V3m-9 8h.01M10 12h.01M12 16h.01m-6 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
Book Your Appointment
</h3>
<!-- Service Selection -->
<div class="mb-6">
<label for="service" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Select Service</label>
<div class="relative">
<select id="service" name="service" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm appearance-none pr-8">
<option value="">Choose a service...</option>
<option value="consultation">Initial Consultation (60 min)</option>
<option value="design">Concept Design Review (90 min)</option>
<option value="prototype">Prototype Feedback Session (45 min)</option>
<option value="maintenance">Post-Project Maintenance (30 min)</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<!-- Date Picker (Simplified) -->
<div class="mb-6">
<label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Select Date</label>
<input type="date" id="date" name="date" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" min="2023-11-20">
</div>
<!-- Time Slots -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Available Time Slots</label>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
<button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">09:00 AM</button>
<button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">10:30 AM</button>
<button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-blue-600 dark:bg-blue-700 text-white shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">11:00 AM</button>
<button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">01:00 PM</button>
<button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 cursor-not-allowed opacity-50">02:30 PM</button>
<button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">04:00 PM</button>
</div>
</div>
<!-- Additional Notes -->
<div class="mb-6">
<label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Additional Notes (optional)</label>
<textarea id="notes" name="notes" rows="3" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Any specific requirements or questions?"></textarea>
</div>
<!-- Submit Button -->
<div class="flex justify-end">
<button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition duration-300">
<svg class="-ml-1 mr-2 h-5 w-5" 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="M8 7V3m8 4V3m-9 8h.01M10 12h.01M12 16h.01m-6 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
Confirm Booking
</button>
</div>
</div>
<!-- Other Interactive Elements (e.g., Reviews/Testimonials) -->
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-6">
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">Client Testimonials</h3>
<div class="space-y-4">
<div class="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-b-0">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Client Avatar">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">Jane D.</p>
<div class="flex text-yellow-400">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
</div>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300">"John's expertise is unmatched! He helped us streamline our production process. Highly recommend!"</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Reviewed on Nov 10, 2023</p>
</div>
<div class="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-b-0">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Client Avatar">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">Robert L.</p>
<div class="flex text-yellow-400">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
</div>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300">"Great communication and delivered exactly what was promised. A true professional."</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Reviewed on Oct 25, 2023</p>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de Componentes Sociales
Un componente social brutalista, complejo y centrado en el comercio electrónico con un esquema de color análogo, implementado con Tailwind CSS. Es sensible y admite el modo oscuro.
Componentes sociales
Un componente social skeuomórfico diseñado para blogs/contenido con colores vibrantes y compatibilidad con el modo oscuro.
Tarjeta social de glassmorfismo
Un componente de tarjeta social de glassmorphism simple y receptivo con colores pastel y soporte para modo oscuro, adecuado para interfaces de tablero.