Skeuomorphic_Grayscale_Media_Component

<div class="p-4 sm:p-8 md:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl p-6 md:p-10 rounded-3xl shadow-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
      flex flex-col lg:flex-row gap-8 lg:gap-12 relative overflow-hidden
      after:content-[''] after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40 after:pointer-events-none after:z-10">

    <!-- Main Media Display Area -->
    <div class="flex-1 flex flex-col items-center justify-center p-4 sm:p-6 md:p-8
        rounded-2xl shadow-inner-xl bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800
        relative group overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-950 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <div class="relative z-10 w-full h-full min-h-[300px] md:min-h-[400px] lg:min-h-[500px] flex items-center justify-center">
        <img src="https://picsum.photos/1200/800?random=1" alt="Main Media Content" class="rounded-xl shadow-lg border border-gray-400 dark:border-gray-600 object-cover w-full h-full">
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <button class="p-4 rounded-full bg-gray-700 bg-opacity-70 text-white shadow-lg animate-pulse
                         hover:bg-gray-800 hover:bg-opacity-80 transition-colors duration-300
                         focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-60">
            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="absolute bottom-4 left-4 right-4 p-3 rounded-xl bg-gray-800 bg-opacity-70 text-white font-mono text-sm
                  shadow-xl dark:border dark:border-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div class="flex items-center justify-between">
          <span class="truncate">nature-mountains_adventure.jpg</span>
          <svg class="w-5 h-5 ml-2" 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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Right Sidebar: Details & Controls -->
    <div class="lg:w-2/5 xl:w-1/3 flex flex-col gap-6">

      <!-- Section: Media Information -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Media Information</h3>
        <dl class="text-sm text-gray-700 dark:text-gray-300 space-y-2">
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Title:</dt>
            <dd class="ml-4">Serene Mountain Landscape</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Type:</dt>
            <dd class="ml-4">Image (JPEG)</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Resolution:</dt>
            <dd class="ml-4">1920x1280</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Size:</dt>
            <dd class="ml-4">2.1 MB</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Uploaded By:</dt>
            <dd class="ml-4 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Uploader" class="w-6 h-6 rounded-full mr-2 shadow-sm border border-gray-400 dark:border-gray-600">
              John Doe
            </dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Date:</dt>
            <dd class="ml-4">2023-10-26</dd>
          </div>
        </dl>
      </div>

      <!-- Section: Action Controls -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Actions</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="flex items-center justify-center px-4 py-3 rounded-xl 
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path>
            </svg>
            Preview
          </button>
          <button class="flex items-center justify-center px-4 py-3 rounded-xl 
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
            </svg>
            Download
          </button>
          <button class="flex items-center justify-center px-4 py-3 rounded-xl sm:col-span-2
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M16 12l-4 4-4-4M12 20v-8M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Share Link
          </button>
        </div>
      </div>

      <!-- Section: Tags/Categories -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Tags & Categories</h3>
        <div class="flex flex-wrap gap-2">
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Nature
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Landscape
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Mountains
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Outdoor
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Photography
          </span>
        </div>
      </div>

    </div>
  </div>
</div>