<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>
