User Profiles Component
A simple, responsive user profile component for e-commerce with microinteractions, complementing color scheme, dark mode support, and no JavaScript.
HTML Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block mx-auto sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
<div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
<p class="text-xl leading-5 font-medium text-gray-900 dark:text-white">John Doe</p>
<p class="text-sm leading-5 text-gray-600 dark:text-gray-400">Customer since 2023</p>
<button class="mt-4 px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150 dark:bg-blue-700 dark:hover:bg-blue-600">View Profile</button>
</div>
</div>
</div>Related Components
User Profiles Component - Dark Forest Theme
A simple, responsive user profile component designed for real estate platforms, featuring a dark forest-green color scheme and full dark mode support.
User Profiles Component
A responsive user profiles component for a dashboard, with a dark mode pastel theme, built with Tailwind CSS. It displays user avatars, names, roles, and a brief description, with a follow button. The design adapts to different screen sizes and supports dark mode based on the system preference.
User Profiles Component
Responsive User Profiles Component with Microinteractions, Vibrant color scheme, and Simple complexity level for Portfolio.