Componente de fuente de actividad
Un componente de alimentación de actividades diseñado con una estética esqueuomórfica, utilizando un esquema de color triádico adecuado para sitios web comerciales/corporativos. Es sensible y admite el modo oscuro.
Código HTML
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
<!-- Component Container -->
<div class="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-850 rounded-xl shadow-2xl overflow-hidden
border border-gray-200 dark:border-gray-700
transform perspective-1000 rotateX-3 rotateY-2 scale-98
transition-all duration-300 ease-in-out hover:scale-100 hover:rotateX-0 hover:rotateY-0">
<!-- Header -->
<div class="px-6 py-4 bg-gradient-to-br from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900 text-white shadow-inner-lg
border-b border-blue-700 dark:border-blue-900
relative overflow-hidden z-10">
<h2 class="text-3xl font-extrabold text-white tracking-tight leading-tight text-shadow-md relative z-20">
Activity Feed
</h2>
<p class="mt-1 text-blue-100 dark:text-blue-200 text-sm italic relative z-20">Recent updates and notifications</p>
<!-- Skeuomorphic light reflection -->
<div class="absolute top-0 left-0 w-full h-full opacity-20 light-reflection z-10"></div>
</div>
<!-- Activity List -->
<div class="divide-y divide-gray-200 dark:divide-gray-700 p-4 sm:p-6">
<!-- Activity Item 1 -->
<div class="py-4 flex items-start space-x-4 group
relative z-10
bg-white dark:bg-gray-850 rounded-lg p-3
transform transition-all duration-200 ease-in-out
active:translate-y-px active:shadow-inner hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-900">
<div class="flex-shrink-0 relative">
<img class="h-12 w-12 rounded-full ring-2 ring-emerald-500 dark:ring-emerald-400 object-cover shadow-md user-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-850 bg-emerald-400 animate-pulse" aria-hidden="true"></span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-snug">
<a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">John Doe</a> <span class="font-normal text-gray-600 dark:text-gray-400">completed task</span>
<span class="text-emerald-600 dark:text-emerald-400 font-medium ml-1">"Project Alpha Design"</span>
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
<time datetime="2023-10-26T14:30">October 26, 2023 at 2:30 PM</time>
</p>
<div class="mt-2 p-2 bg-gray-100 dark:bg-gray-825 rounded-md text-sm text-gray-700 dark:text-gray-300 shadow-inner px-3 py-2 border border-gray-200 dark:border-gray-750 message-bubble">
<p>Uploaded final mockups and updated progress to 100%.</p>
</div>
</div>
</div>
<!-- Activity Item 2 -->
<div class="py-4 flex items-start space-x-4 group
relative z-10
bg-white dark:bg-gray-850 rounded-lg p-3
transform transition-all duration-200 ease-in-out
active:translate-y-px active:shadow-inner hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-900">
<div class="flex-shrink-0 relative">
<img class="h-12 w-12 rounded-full ring-2 ring-red-500 dark:ring-red-400 object-cover shadow-md user-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-850 bg-red-400" aria-hidden="true"></span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-snug">
<a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">Jane Smith</a> <span class="font-normal text-gray-600 dark:text-gray-400">commented on issue</span>
<span class="text-red-600 dark:text-red-400 font-medium ml-1">#CRIT-451</span>
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
<time datetime="2023-10-26T10:15">October 26, 2023 at 10:15 AM</time>
</p>
<div class="mt-2 p-2 bg-gray-100 dark:bg-gray-825 rounded-md text-sm text-gray-700 dark:text-gray-300 shadow-inner px-3 py-2 border border-gray-200 dark:border-gray-750 message-bubble">
<p>"The reported bug seems to be related to the recent database migration. Investigating further..."</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-xs mt-1 block tracking-wide">View Issue</a>
</div>
</div>
</div>
<!-- Activity Item 3 -->
<div class="py-4 flex items-start space-x-4 group
relative z-10
bg-white dark:bg-gray-850 rounded-lg p-3
transform transition-all duration-200 ease-in-out
active:translate-y-px active:shadow-inner hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-900">
<div class="flex-shrink-0 relative">
<div class="flex items-center justify-center h-12 w-12 rounded-full ring-2 ring-orange-500 dark:ring-orange-400 bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 shadow-md user-avatar-placeholder">
<svg class="h-6 w-6" 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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
</path>
</svg>
</div>
<span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-850 bg-orange-400" aria-hidden="true"></span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-snug">
<a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">Marketing Team</a> <span class="font-normal text-gray-600 dark:text-gray-400">updated document</span>
<span class="text-orange-600 dark:text-orange-400 font-medium ml-1">"Q4 Strategy Plan"</span>
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
<time datetime="2023-10-25T16:00">Yesterday at 4:00 PM</time>
</p>
<div class="mt-2 flex items-center space-x-2 p-2 bg-gray-100 dark:bg-gray-825 rounded-md shadow-inner px-3 py-2 border border-gray-200 dark:border-gray-750 message-bubble">
<img class="h-8 w-8 rounded-sm object-cover shadow-sm ring-1 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/50/50?random=1" alt="Document thumbnail">
<div>
<p class="text-sm text-gray-700 dark:text-gray-300">Updated Sections 2.1 and 3.5 with new market research data.</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-xs">Download Document</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer / Action Area -->
<div class="px-6 py-4 bg-gray-100 dark:bg-gray-850 border-t border-gray-200 dark:border-gray-700
relative z-10 shadow-inner-top skeuo-footer">
<button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm
text-white bg-blue-600 dark:bg-blue-700
hover:bg-blue-700 dark:hover:bg-blue-800
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-850
skeuo-button transform active:scale-95 transition-all duration-150 ease-in-out">
<svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
</svg>
Load More Activities
</button>
<p class="mt-3 text-xs text-center text-gray-500 dark:text-gray-400">Latest update 5 minutes ago</p>
</div>
</div>
<!-- Custom Skeuomorphic Styles (via arbitrary values or pseudo-elements not directly in Tailwind classes) -->
<style>
.text-shadow-md {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px rgba(0, 0, 0, 0.2);
}
.shadow-inner-lg {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}
.shadow-inner-top {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
}
.dark .shadow-inner-lg {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
}
.dark .shadow-inner-top {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(255, 255, 255, 0.02);
}
/* Light reflection effect for header */
.light-reflection {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
/* Deeper dark mode colors for a more 'recessed' look */
.dark\:bg-gray-850 {
background-color: #1a202c; /* Deeper than typical gray-800 */
}
.dark\:bg-gray-825 {
background-color: #28303e; /* Slightly lighter than gray-850 for inner elements */
}
.dark\:border-gray-750 {
border-color: #3b4252; /* Slightly lighter border for inner elements */
}
/* Skeuomorphic button style */
.skeuo-button {
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.skeuo-button:hover {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.skeuo-button:active {
box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.4), inset 0px -1px 0px rgba(255, 255, 255, 0.1);
}
.dark .skeuo-button {
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.6), inset 0px 1px 0px rgba(255, 255, 255, 0.05);
}
.dark .skeuo-button:hover {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.7), inset 0px 1px 0px rgba(255, 255, 255, 0.05);
}
.dark .skeuo-button:active {
box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.7), inset 0px -1px 0px rgba(255, 255, 255, 0.02);
}
/* Activity item interaction */
.group:active {
transform: translateY(1px);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) /* Subtle inner shadow for 'pressed' effect */
}
.dark .group:active {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) /* Darker inner shadow for 'pressed' effect */
}
/* General Skeuomorphic depth for buttons, avatars, etc. */
.user-avatar, .user-avatar-placeholder, .message-bubble, .skeuo-footer {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15), -2px -2px 5px rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255,255,255,0.4);
}
.skeuo-footer {
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.15), 0 2px 5px rgba(255, 255, 255, 0.1);
}
.dark .user-avatar, .dark .user-avatar-placeholder, .dark .message-bubble, .dark .skeuo-footer {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6), -2px -2px 5px rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255,255,255,0.05);
}
.dark .skeuo-footer {
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(255, 255, 255, 0.02);
}
/* Pseudo 3D effect for the main container */
@media (min-width: 768px) {
.perspective-1000 {
perspective: 1000px;
}
.rotateX-3 {
transform: rotateX(3deg);
}
.rotateY-2 {
transform: rotateY(2deg);
}
/* Ensuring transform applies to its own layer for smooth transition */
transform: translateZ(0);
}
/* Ensure smooth transitions for dark mode color changes */
html.dark * {
transition-property: background-color, border-color, color, fill, stroke, box-shadow;
transition-duration: 200ms;
}
</style>
</div>Componentes relacionados
Componente de fuente de actividad
Un componente complejo de fuente de actividades diseñado para mostrar el contenido del blog con múltiples elementos interactivos. Incorpora un estilo de diseño 3D y una combinación de colores complementaria. Admite diseño responsivo y tema oscuro.
Componente de fuente de actividad
Componente de alimentación de actividades con estética retro / vintage de los años 80 / 90, combinación de colores monocromática, complejidad moderada para el consumo de blog / contenido. Diseño responsivo con soporte para modo oscuro usando Tailwind CSS. Imágenes de picsum.photos y avatares de randomuser.me.
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.