File Viewer Component

<div class="bg-gray-900 p-8">
  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
    <div class="md:flex">
      <div class="w-full p-4">
        <div class="flex justify-between items-center">
          <h2 class="text-gray-200 font-semibold text-xl">Files</h2>
          <button class="text-gray-400 hover:text-gray-200 focus:outline-none">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
          </button>
        </div>
        <div class="mt-4">
          <div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
            <div class="flex items-center">
              <svg class="h-6 w-6 text-blue-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 010-4H7l-3-4v-5a2 2 012-2h4l2 2h5a2 2 012 2v6m-11 5H4"></path>
              </svg>
              <span class="text-gray-300">Document.pdf</span>
            </div>
            <span class="text-gray-500 text-sm">2.3MB</span>
          </div>
          <div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
            <div class="flex items-center">
              <svg class="h-6 w-6 text-green-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 001-2 2h-4a2 2 001-2 2v6m3 2a2 2 010-4 2 2 010 4zm-6 0a2 2 010-4 2 2 010 4z"></path>
              </svg>
              <span class="text-gray-300">Spreadsheet.xlsx</span>
            </div>
            <span class="text-gray-500 text-sm">1.1MB</span>
          </div>
           <div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
            <div class="flex items-center">
              <svg class="h-6 w-6 text-purple-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 001 21.072 13V6.93a1 1 001-.776-1.609l-4.553-2.276A1 1 000 4.63v14.74c0 .426.49.64 1.06-.33L15 14v-4zm6 5a2 2 011-4 2 2 011 4zm-6 0a2 2 011-4 2 2 011 4z"></path>
              </svg>
              <span class="text-gray-300">Presentation.pptx</span>
            </div>
            <span class="text-gray-500 text-sm">4.5MB</span>
          </div>
           <div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
            <div class="flex items-center">
              <svg class="h-6 w-6 text-red-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 001.414 0L14 16m-2-6l-2 2m2 2l2-2m2-2l-2-2m2 2l-2-2m-2 2l-2-2"></path>
              </svg>
              <span class="text-gray-300">Image.jpg</span>
            </div>
            <span class="text-gray-500 text-sm">7.8MB</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>