User Mentions Component
A responsive user mentions component for real estate platforms, featuring a watercolor/artistic design style with ocean blue tones. Includes interactive elements and dark mode support.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-slate-800 dark:to-slate-950 min-h-screen font-sans">
<!-- Component Wrapper with artistic background -->
<div class="max-w-4xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl relative
bg-[url('https://www.transparenttextures.com/patterns/water-color.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-wood.png')] bg-cover bg-center
border border-blue-200 dark:border-slate-700 backdrop-blur-sm">
<!-- Watercolor Overlay (top) -->
<div class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-blue-900/10 dark:to-transparent opacity-60 pointer-events-none rounded-t-3xl"></div>
<!-- Content Area -->
<div class="relative p-4 sm:p-8 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm rounded-3xl">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-6 text-center tracking-tight leading-tight relative z-10">
<span class="relative">
Property Mentions
<span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full"></span>
</span>
</h2>
<!-- Search/Filter Input -->
<div class="relative mb-8 shadow-md rounded-xl overflow-hidden">
<input type="text" placeholder="Search mentions or properties..." class="w-full p-4 pl-12 pr-4 text-lg bg-blue-50 dark:bg-slate-800 text-blue-900 dark:text-slate-200 rounded-xl
focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700/50 transition-all duration-300
placeholder:text-blue-400 dark:placeholder:text-slate-500 border border-blue-200 dark:border-slate-700">
<svg class="absolute left-4 top-1/2 -translate-y-1/2 text-blue-500 dark:text-slate-400 w-6 h-6" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<!-- Mentions Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<!-- Mention Card 1 -->
<div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
<div class="flex items-start mb-4">
<img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Maria S.</h3>
<p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 15, 2024</p>
</div>
</div>
<p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"I just saw the listing for the beachfront villa in Malibu. It's absolutely stunning! Can we schedule a viewing soon? The photos are incredible."</p>
<div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
<img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property1/150/100" alt="Property Thumbnail">
<div>
<p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Beachfront Villa, Malibu</p>
<p class="text-blue-600 dark:text-blue-400 text-xs truncate">$7,500,000</p>
</div>
</div>
<div class="mt-4 flex justify-end space-x-2">
<button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
View Thread
</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
Reply
</button>
</div>
</div>
<!-- Mention Card 2 -->
<div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
<div class="flex items-start mb-4">
<img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/30.jpg" alt="User Avatar">
<div>
<h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">David L.</h3>
<p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 14, 2024</p>
</div>
</div>
<p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Regarding the downtown condo in NYC, are there any virtual tour options available? My client is very interested but is out of state for now."</p>
<div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
<img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property2/150/100" alt="Property Thumbnail">
<div>
<p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Luxury Condo, NYC</p>
<p class="text-blue-600 dark:text-blue-400 text-xs truncate">$2,100,000</p>
</div>
</div>
<div class="mt-4 flex justify-end space-x-2">
<button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
View Thread
</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
Reply
</button>
</div>
</div>
<!-- Mention Card 3 -->
<div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
<div class="flex items-start mb-4">
<img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar">
<div>
<h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Sophia K.</h3>
<p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 12, 2024</p>
</div>
</div>
<p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Your recent blog post about investing in rental properties in Florida was incredibly insightful! I'm considering the one near Orlando. Can we connect?"</p>
<div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
<img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property3/150/100" alt="Property Thumbnail">
<div>
<p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Family Home, Orlando</p>
<p class="text-blue-600 dark:text-blue-400 text-xs truncate">$480,000</p>
</div>
</div>
<div class="mt-4 flex justify-end space-x-2">
<button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
View Thread
</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
Reply
</button>
</div>
</div>
<!-- Mention Card 4 -->
<div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
<div class="flex items-start mb-4">
<img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
<div>
<h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Michael R.</h3>
<p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 10, 2024</p>
</div>
</div>
<p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Hey, I found a promising commercial space in downtown Seattle through your platform. The details say it's perfect for a startup. Any more insights?"</p>
<div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
<img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property4/150/100" alt="Property Thumbnail">
<div>
<p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Commercial Loft, Seattle</p>
<p class="text-blue-600 dark:text-blue-400 text-xs truncate">$1,200,000</p>
</div>
</div>
<div class="mt-4 flex justify-end space-x-2">
<button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
View Thread
</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
Reply
</button>
</div>
</div>
</div>
<!-- See All Mentions Button -->
<div class="mt-10 text-center">
<button class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 text-white font-semibold rounded-full shadow-lg group
hover:from-blue-600 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-950 transition-all duration-300 transform hover:-translate-y-1">
<svg class="w-5 h-5 mr-3 -ml-1 transform group-hover:scale-110 transition-transform duration-200" 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 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
See All Mentions
</button>
</div>
</div>
<!-- Watercolor Overlay (bottom) -->
<div class="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-transparent dark:to-transparent opacity-60 pointer-events-none rounded-b-3xl"></div>
</div>
</div>Related Components
User Mentions Component
A responsive User Mentions Component with Glassmorphism design, complementary color scheme, and dark mode support, suitable for business websites.
User Mentions Component
A complex, responsive user mentions component for educational platforms with a watercolor/artistic style, cool neutral color scheme, and dark mode support. Features user avatars, names, roles, and a subtle watercolor background effect.
User Mentions Component
A complex, monochromatic, industrial-style user mentions component for travel/tourism websites, featuring raw materials, exposed elements, and utilitarian aesthetics. It's fully responsive and supports dark mode.