Componente Visor de archivos de neumorfismo

<div class="p-6 max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-lg space-y-4">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <svg class="h-12 w-12 text-teal-500 dark:text-teal-300" 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="M9 17v-5m0 0V5c0-1.1.9-2 2-2h2a2 2 0 012 2v5m0 0v5a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
    </div>
    <div class="flex-grow">
      <div class="text-xl font-medium text-black dark:text-white">Document.pdf</div>
      <p class="text-gray-500 dark:text-gray-400">1.5 MB</p>
    </div>
  </div>
  <div class="flex justify-between items-center">
    <button class="px-4 py-2 text-sm text-blue-600 dark:text-blue-300 font-semibold rounded-full border border-transparent bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Download</button>
    <button class="px-4 py-2 text-sm text-red-600 dark:text-red-300 font-semibold rounded-full border border-transparent bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Delete</button>
  </div>
  <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
    <div class="bg-teal-500 dark:bg-teal-300 h-2.5 rounded-full" style="width: 50%"></div>
  </div>
</div>

<style>
  .shadow-lg {
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .shadow-lg {
    box-shadow: 7px 7px 15px #6b6b6b, -7px -7px 15px #a1a1a1;
  }
</style>