Composant de flux d’activité
Un composant de flux d’activités conçu avec une esthétique skeuomorphe, utilisant une palette de couleurs triadique adaptée aux sites Web d’entreprise. Il est réactif et prend en charge le mode sombre.
HTML Code
<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>Composants associés
Composant Flux d’activités
Flux d’activité Minimaliste/Design plat pour E-commerce, Monochrome, Simple, Réactif, Thème sombre
Composant de flux d’activité
Composant de flux d’activité brutaliste pour les sites Web d’entreprise/d’entreprise avec une palette de couleurs analogue, une complexité modérée, une conception réactive et une prise en charge du thème sombre.
Composant Flux d’activités
Un composant de flux d’activité de style rétro/vintage conçu pour présenter des travaux ou des produits avec des couleurs à haute saturation, des éléments interactifs et la prise en charge du mode sombre.