Componente de menciones de usuario - Skeuomorphism
El usuario menciona el componente con diseño de skeuomorfismo, efectos responsivos y soporte de temas oscuros usando solo html con css de viento de cola. No se necesita javascript.
Código HTML
<div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex justify-center items-center">
<div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-white dark:from-gray-900 dark:to-gray-700 opacity-50 pointer-events-none"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Mentions</h2>
<div class="space-y-4">
<!-- Mention 1 -->
<div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Mentioned you in a comment</p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
</div>
<!-- Mention 2 -->
<div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Added you to a project</p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
</div>
<!-- Mention 3 -->
<div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Reacted to your post</p>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de menciones de usuario
Componente de menciones de usuario con soporte para modo oscuro, con efectos responsivos y soporte para temas oscuros. Utiliza imágenes de marcador de posición aleatorias de picsum.photos para las imágenes y randomuser.me para los avatares.
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 menciones de usuario responsivo con soporte para temas oscuros que usa Tailwind CSS. No se necesita JavaScript, solo HTML con clases Tailwind. Para el modo oscuro, usa el prefijo dark: de Tailwind para el estilo. Las imágenes son de picsum.photos y los avatares de randomuser.me.