Datei-Viewer-Komponente

<div class="relative p-4 md:p-6 lg:p-8 bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">

  <!-- Outer Skeuomorphic Container -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg bg-gradient-to-br from-indigo-400 to-purple-500 dark:from-gray-700 dark:to-gray-800 rounded-3xl p-1.5 shadow-2xl transition-all duration-300 ease-in-out
              dark:border-t dark:border-l dark:border-gray-600 dark:border-opacity-30
              border-t border-l border-indigo-300 border-opacity-60">

    <!-- Inner Skeuomorphic Container (Simulating a Screen/Display) -->
    <div class="relative bg-gradient-to-br from-indigo-600 to-purple-700 dark:from-gray-900 dark:to-black rounded-2xl p-5 md:p-6 lg:p-7 shadow-inner-xl transform transition-all duration-300 ease-in-out
                dark:border-b dark:border-r dark:border-gray-700 dark:border-opacity-40
                border-b border-r border-purple-800 border-opacity-70
                active:shadow-inner-sm ">

      <!-- Top Bar / Header -->
      <div class="flex items-center justify-between mb-5">
        <div class="w-3 h-3 rounded-full bg-red-500 shadow-md transform -translate-y-px"></div>
        <div class="flex space-x-2">
          <div class="w-3 h-3 rounded-full bg-yellow-500 shadow-md"></div>
          <div class="w-3 h-3 rounded-full bg-green-500 shadow-md"></div>
        </div>
      </div>

      <!-- File Name / Title -->
      <div class="text-center text-white text-xl md:text-2xl font-bold mb-6 tracking-wide drop-shadow-md">
        <span class="block">MyDocument.pdf</span>
      </div>

      <!-- Document Icon / Preview Area -->
      <div class="relative bg-gradient-to-br from-white via-indigo-100 to-white dark:from-gray-100 dark:via-gray-200 dark:to-gray-100 rounded-xl p-6 md:p-8 flex items-center justify-center flex-col shadow-inner-lg
                  border border-gray-300 dark:border-gray-600 mb-6">
        <svg class="w-16 h-16 md:w-20 md:h-20 text-indigo-500 dark:text-purple-600 mb-4 drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 2.586L16.414 6A2 2 0 0117 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
        </svg>
        <p class="text-sm md:text-base text-gray-700 dark:text-gray-800 font-semibold">PDF Document</p>
        <p class="text-xs text-gray-500 dark:text-gray-600">2.4 MB</p>

        <!-- Skeuomorphic reflection/light effect -->
        <div class="absolute top-2 left-2 w-1/3 h-1/3 bg-white bg-opacity-20 rounded-full blur-sm opacity-60 pointer-events-none"></div>
        <div class="absolute bottom-2 right-2 w-1/4 h-1/4 bg-white bg-opacity-10 rounded-full blur-xs opacity-40 pointer-events-none"></div>
      </div>

      <!-- Action Buttons -->
      <div class="flex justify-around space-x-4 mb-4">

        <button class="flex-1 py-3 px-4 md:py-4 md:px-5 bg-gradient-to-br from-blue-500 to-cyan-500 dark:from-blue-700 dark:to-cyan-800 text-white rounded-xl shadow-lg hover:shadow-xl active:shadow-md
                       transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out
                       border-b-4 border-l-2 border-blue-700 dark:border-blue-900 font-semibold text-sm md:text-base">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 md:w-6 md:h-6 mr-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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
            Download
          </span>
        </button>

        <button class="flex-1 py-3 px-4 md:py-4 md:px-5 bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white rounded-xl shadow-lg hover:shadow-xl active:shadow-md
                       transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out
                       border-b-4 border-l-2 border-purple-700 dark:border-purple-900 font-semibold text-sm md:text-base">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 md:w-6 md:h-6 mr-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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
            View
          </span>
        </button>
      </div>

      <!-- Separator Line -->
      <div class="h-px bg-gradient-to-r from-transparent via-white to-transparent dark:via-gray-600 mb-4 opacity-30"></div>

      <!-- File Information Section -->
      <div class="text-white/90 text-sm md:text-base space-y-2">
        <p class="flex items-center"><svg class="w-4 h-4 mr-2 text-white/70" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg> <span class="font-semibold">Type:</span> PDF Document</p>
        <p class="flex items-center"><svg class="w-4 h-4 mr-2 text-white/70" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg> <span class="font-semibold">Last Modified:</span> April 23, 2023</p>
        <p class="flex items-center"><svg class="w-4 h-4 mr-2 text-white/70" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h.01a1 1 0 100-2H10zm3 0a1 1 0 000 2h.01a1 1 0 100-2H13zm-3 4a1 1 0 000 2h.01a1 1 0 100-2H10zm3 0a1 1 0 000 2h.01a1 1 0 100-2H13z" clip-rule="evenodd"></path></svg> <span class="font-semibold">Created By:</span> Admin User</p>
      </div>

    </div>
  </div>

  <!-- Background elements for skeuomorphic depth -->
  <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/1920/1080'); background-size: cover; background-position: center; filter: blur(5px);"></div>

</div>

<style>
  /* Custom utility for inner shadow, simulating an inset screen */
  .shadow-inner-xl {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(0, 0, 0, 0.2)
  }
  .shadow-inner-lg {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05)
  }
  .shadow-inner-sm {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .dark .shadow-inner-xl {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.4)
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1)
  }
  .dark .shadow-inner-sm {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.2);
  }

  /* Optional: Background pattern for skeuomorphic feel */
  .bg-gradient-to-br {
    background-attachment: fixed;
  }
</style>