Neumorphic User Profiles Component
A complex, responsive user profiles component with a neumorphic design style and ocean/blue color scheme, suitable for business/corporate websites. Includes dark mode support.
HTML Code
<div class="bg-blue-100 dark:bg-gray-900 min-h-screen py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-500">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-extrabold text-blue-900 dark:text-blue-200 text-center mb-12 sm:text-5xl lg:text-6xl drop-shadow-lg">
Our Esteemed Team
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Profile Card 1 -->
<div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
<div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
<img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile of Jane Doe">
<div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
</div>
<h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
Jane Doe
</h3>
<p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">CEO, Founder</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
</a>
</div>
<p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
"Innovating the future, one elegant solution at a time."
</p>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
</div>
</div>
<!-- Profile Card 2 -->
<div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
<div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
<img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Profile of Mark Johnson">
<div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
</div>
<h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
Mark Johnson
</h3>
<p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Lead Developer</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
</a>
</div>
<p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
"Crafting robust and scalable software solutions with passion."
</p>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
</div>
</div>
<!-- Profile Card 3 -->
<div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
<div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
<img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profile of Sarah Lee">
<div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
</div>
<h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
Sarah Lee
</h3>
<p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Head of Marketing</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
</a>
</div>
<p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
"Driving brand growth with creative strategies and data-driven insights."
</p>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
</div>
</div>
<!-- Profile Card 4 -->
<div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
<div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
<img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Profile of David Chen">
<div class="absolute bottom-0 right-0 w-8 h-8 bg-red-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
</div>
<h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
David Chen
</h3>
<p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Financial Advisor</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
</a>
</div>
<p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
"Guiding clients towards financial success with strategic insights."
</p>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom CSS for Neumorphism Shadows */
.shadow-custom-light {
box-shadow: 8px 8px 16px #94c8e7, -8px -8px 16px #d4efff;
}
.dark .shadow-custom-dark {
box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #3a4b6b;
}
.shadow-custom-hover-light {
box-shadow: inset 6px 6px 12px #94c8e7, inset -6px -6px 12px #d4efff;
}
.dark .shadow-custom-hover-dark {
box-shadow: inset 6px 6px 12px #1a202c, inset -6px -6px 12px #3a4b6b;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #94c8e7, inset -5px -5px 10px #d4efff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #3a4b6b;
}
.shadow-inner-neumorphic-light {
box-shadow: inset 3px 3px 6px #94c8e7, inset -3px -3px 6px #d4efff;
}
.dark .shadow-inner-neumorphic-dark {
box-shadow: inset 3px 3px 6px #1a202c, inset -3px -3px 6px #3a4b6b;
}
.shadow-small-neumorphic-light {
box-shadow: 3px 3px 6px #94c8e7, -3px -3px 6px #d4efff;
}
.dark .shadow-small-neumorphic-dark {
box-shadow: 3px 3px 6px #1a202c, -3px -3px 6px #3a4b6b;
}
.shadow-small-neumorphic-inset-light {
box-shadow: inset 2px 2px 4px #94c8e7, inset -2px -2px 4px #d4efff;
}
.dark .shadow-small-neumorphic-inset-dark {
box-shadow: inset 2px 2px 4px #1a202c, inset -2px -2px 4px #3a4b6b;
}
.shadow-neumorphic-circle-light {
box-shadow: 2px 2px 5px #94c8e7, -2px -2px 5px #d4efff;
}
.dark .shadow-neumorphic-circle-dark {
box-shadow: 2px 2px 5px #1a202c, -2px -2px 5px #3a4b6b;
}
.shadow-neumorphic-thumb-light {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.dark .shadow-neumorphic-thumb-dark {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(60, 60, 60, 0.7);
}
<\/style>Related Components
User Profiles Component
A responsive user profile component with a 3D design aesthetic and earth-tone color scheme, suitable for travel and tourism websites. Includes dark mode support.
User Profiles Component
A user profiles component for agricultural/farming websites, featuring an industrial design style with muted colors, user avatars, roles, and location info. It's responsive and supports dark mode.
Neumorphic User Profile Card - Pastel
A simple, responsive user profile card with a pastel-themed neumorphic design, suitable for portfolios, including dark mode support.