Componente de fuente de actividad
Un componente de alimentación de actividades con diseño de neumorfismo, combinación de colores en tonos tierra, diseño complejo, diseño receptivo y compatibilidad con temas oscuros.
Código HTML
<div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 min-h-screen">
<!-- Light Mode Neumorphism styles -->
<style>
.neumorphic-light {
border-radius: 1rem;
background: #e0e0e0;
box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
}
.neumorphic-light-inset {
border-radius: 1rem;
background: #e0e0e0;
box-shadow: inset 8px 8px 15px #bebebe, inset -8px -8px 15px #ffffff;
}
</style>
<!-- Dark Mode Neumorphism styles -->
<style>
@media (prefers-color-scheme: dark) {
.dark .neumorphic-dark {
border-radius: 1rem;
background: #2d3748;
box-shadow: 8px 8px 15px #1a202c, -8px -8px 15px #454f6a;
}
.dark .neumorphic-dark-inset {
border-radius: 1rem;
background: #2d3748;
box-shadow: inset 8px 8px 15px #1a202c, inset -8px -8px 15px #454f6a;
}
}
</style>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Left Sidebar (User Profile / Filters) -->
<div class="md:col-span-1 p-6 neumorphic-light dark:neumorphic-dark">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-24 h-24 mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Blogger & Content Creator</p>
</div>
<div class="mt-8">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h3>
<ul class="space-y-3">
<li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">All Activity</a></li>
<li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comments</a></li>
<li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Likes</a></li>
<li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">New Posts</a></li>
</ul>
</div>
</div>
<!-- Main Activity Feed -->
<div class="md:col-span-2 space-y-6">
<!-- Activity Card Example 1 -->
<div class="p-6 neumorphic-light dark:neumorphic-dark">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith <span class="font-normal text-gray-600 dark:text-gray-400">commented on</span> "Exploring the Wilds"</p>
<span class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</span>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">"Great post! I really enjoyed reading about your adventure."</p>
<div class="flex justify-end space-x-4">
<button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Reply</button>
<button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Like</button>
</div>
</div>
<!-- Activity Card Example 2 -->
<div class="p-6 neumorphic-light dark:neumorphic-dark">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones <span class="font-normal text-gray-600 dark:text-gray-400">liked</span> "The Art of Minimalism"</p>
<span class="text-sm text-gray-600 dark:text-gray-400">5 hours ago</span>
</div>
</div>
<div class="flex justify-end space-x-4">
<button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Undo Like</button>
</div>
</div>
<!-- Activity Card Example 3 (New Post) -->
<div class="p-6 neumorphic-light dark:neumorphic-dark">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Emily Davis <span class="font-normal text-gray-600 dark:text-gray-400">published a new post</span> "My Journey in Photography"</p>
<span class="text-sm text-gray-600 dark:text-gray-400">1 day ago</span>
</div>
</div>
<div class="neumorphic-light dark:neumorphic-dark p-4 rounded-md mb-4">
<img src="https://picsum.photos/seed/photography/400/200" alt="Post Image" class="rounded-md mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">My Journey in Photography</h4>
<p class="text-gray-700 dark:text-gray-300 line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="flex justify-end space-x-4">
<button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Read Post</button>
<button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comment</button>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de fuente de actividad
Un componente de fuente de actividad receptivo diseñado en un estilo 3D con soporte para temas oscuros, que incorpora elementos tridimensionales para mayor profundidad y participación.
Componente de fuente de actividad
Componente de alimentación de actividades con diseño de materiales, combinación de colores en escala de grises, complejidad moderada y compatibilidad con el modo oscuro
Componente de fuente de actividad
Feed de actividades de diseño minimalista/plano para comercio electrónico, monocromático, simple, responsivo, tema oscuro