Componente de fuente de actividad
Componente de fuente de actividad con estilo Glassmorphism, combinación de colores vibrantes, complejidad moderada y compatibilidad con temas oscuros receptivos.
Código HTML
<div class="relative antialiased px-4 dark:bg-gray-900 min-h-screen">
<div class="max-w-xl mx-auto">
<div class="relative">
<span class="absolute top-0 left-2/4 -ml-px h-full" aria-hidden="true">
<span class="w-0.5 h-full bg-gray-300 block dark:bg-gray-700"></span>
</span>
<ul class="relative">
<!-- Item -->
<li class="relative mb-6">
<div class="flex items-center">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-500 flex-shrink-0 shadow">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-4.964-1.484L3 20l1.395-3.493A8.968 8.968 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
</div>
<div class="flex-grow p-3">
<div class="flex items-center justify-between">
<a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-indigo-500 dark:text-white">Alex Shatov</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1hr ago</span>
</div>
<div class="text-gray-500 dark:text-gray-400">Preached to the choir about the importance of having a plan.</div>
</div>
</div>
</li>
<!-- Item -->
<li class="relative mb-6">
<div class="flex items-center">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-pink-500 flex-shrink-0 shadow">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6H4m6 6H4m6 0v2m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6h2m-2 0h2m0 6h2m0-6v2"></path></svg>
</div>
<div class="flex-grow p-3">
<div class="flex items-center justify-between">
<a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:text-white">Mark Cameron</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">2hr ago</span>
</div>
<div class="text-gray-500 dark:text-gray-400">Discussed the benefits of a healthy diet and exercise.</div>
</div>
</div>
</li>
<!-- Item -->
<li class="relative mb-6">
<div class="flex items-center">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-teal-500 flex-shrink-0 shadow animate-pulse">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="flex-grow p-3">
<div class="flex items-center justify-between">
<a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-teal-500 dark:text-white">Drew Berry</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">10hr ago</span>
</div>
<div class="text-gray-500 dark:text-gray-400">Is working on a new project.</div>
</div>
</div>
</li>
<!-- Item -->
<li class="relative mb-6">
<div class="flex items-center">
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-fuchsia-500 flex-shrink-0 shadow">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
</div>
<div class="flex-grow p-3">
<div class="flex items-center justify-between">
<a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-fuchsia-500 dark:text-white">Danielle Price</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1 day ago</span>
</div>
<div class="text-gray-500 dark:text-gray-400">Completed the quarterly report.</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>Componentes relacionados
Componente de fuente de actividad
Un componente de fuente de actividad con capacidad de respuesta diseñado para la interfaz de usuario del modo oscuro mediante CSS de Tailwind.
Componente de fuente de actividad 41
Un componente de fuente de actividad responsivo con un estilo de diseño 3D, que incorpora efectos de profundidad y compatibilidad con temas oscuros, creado con Tailwind CSS.
Componente de fuente de actividad
Un componente de alimentación de actividades de estilo brutalista con diseño responsivo, diseños de alto contraste y compatibilidad con el modo oscuro mediante CSS de Tailwind.