Volet Composantes sociales
Il s’agit d’un composant social complexe de style industriel pour les systèmes de réservation et de réservation, avec des neutres froids, des éléments exposés et la prise en charge du mode sombre. Conçu pour les systèmes de rendez-vous et de réservation.
HTML Code
<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>Composants associés
Composantes sociales
Un composant Web présentant un design glassmorphism avec des éléments translucides et des effets de flou semblables à du verre dépoli, des effets réactifs et la prise en charge du thème sombre.
Volet Composantes sociales
Composant du portefeuille conçu en mode sombre avec une palette de couleurs monochromatiques. Il présente des travaux ou des produits avec une mise en page simple.
Volet Composantes sociales
Un composant de médias sociaux réactif avec prise en charge du mode sombre pour les sites Web d’entreprise, avec une palette de couleurs triadique.