アクティビティフィードコンポーネント

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