Componente de menciones de usuario
Un componente de menciones de usuario que usa CSS de Tailwind con diseño de Glassmorphism, capacidad de respuesta y compatibilidad con temas oscuros.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-sm bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg p-6">
<h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Mentions</h2>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">John Doe</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a comment.</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a post.</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</p>
<p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a message.</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de menciones de usuario
Un componente de menciones de usuario responsivo con soporte para temas oscuros, diseñado para sitios web comerciales. Presenta microinteracciones usando Tailwind CSS y un esquema de color de tono tierra.
Componente de menciones de usuario
Un componente de menciones de usuario diseñado con microinteracciones, con efectos responsivos y compatibilidad con temas oscuros, construido con Tailwind CSS.
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.