Componente de menciones de usuario
Un componente de mención de usuario diseñado con un estilo de cristal con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque. Incluye un soporte de tema oscuro y es responsivo, lo que lo hace adecuado para sitios web de comercio electrónico.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gradient-to-b from-gray-800 to-gray-900">
<div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">User Mentions</h2>
<div class="mt-4 space-y-4">
<div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">@john_doe</p>
</div>
<img src="https://picsum.photos/200/100" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
</div>
<div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-500">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-medium">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">@jane_smith</p>
</div>
<img src="https://picsum.photos/200/101" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
</div>
<div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-500">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-medium">Mike Johnson</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">@mike_johnson</p>
</div>
<img src="https://picsum.photos/200/102" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
</div>
</div>
<button class="mt-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300 w-full">View More</button>
</div>
</div>Componentes relacionados
Componente de menciones de usuario
Un componente de mención de usuario con diseño 3D, efectos responsivos y soporte de temas oscuros usando Tailwind CSS.
Componente de menciones de usuario
Un usuario complejo, monocromático y de estilo industrial menciona el componente para sitios web de viajes/turismo, con materias primas, elementos expuestos y estética utilitaria. Es totalmente sensible y es compatible con el modo oscuro.
Componente de menciones de usuario
Un usuario complejo menciona el componente para CRM/Business Tools, que presenta un esquema de color degradado púrpura/violeta y transiciones suaves. Totalmente receptivo con soporte para modo oscuro.