Search Components

File Viewer

Component for viewing documents and files

File Viewer Component

A responsive File Viewer Component for e-commerce with 3D design, complementary color scheme, and simple layout, supporting dark mode using Tailwind CSS. It displays product files or documents.

Open Preview

                <div class="container mx-auto p-4">
  <!-- Optional: Add a subtle 3D container effect -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 relative overflow-hidden">
    <!-- Complementary Color Accent (Example: Orange and Blue) -->
    <div class="absolute top-0 left-0 w-1/4 h-full bg-orange-500 dark:bg-orange-700 opacity-20"></div>
    <div class="absolute top-0 right-0 w-1/4 h-full bg-blue-500 dark:bg-blue-700 opacity-20"></div>

    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Product Files</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- File Item 1 -->
      <div class="border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center space-x-4 relative group">
        <!-- Subtle 3D effect on hover -->
        <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-700 opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
        <svg class="h-8 w-8 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        <div class="flex-1">
          <p class="text-gray-700 dark:text-gray-300 font-medium">Product_Guide.pdf</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">2.5MB</p>
        </div>
        <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline text-sm">Download</a>
      </div>

      <!-- File Item 2 -->
      <div class="border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center space-x-4 relative group">
        <!-- Subtle 3D effect on hover -->
        <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-700 opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
        <svg class="h-8 w-8 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        <div class="flex-1">
          <p class="text-gray-700 dark:text-gray-300 font-medium">Specifications.docx</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">0.8MB</p>
        </div>
        <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline text-sm">Download</a>
      </div>

      <!-- File Item 3 -->
      <div class="border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center space-x-4 relative group">
        <!-- Subtle 3D effect on hover -->
        <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-700 opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
        <svg class="h-8 w-8 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        <div class="flex-1">
          <p class="text-gray-700 dark:text-gray-300 font-medium"> high_res_image.jpg</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">5.1MB</p>
        </div>
        <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline text-sm">Download</a>
      </div>
    </div>

  </div>
</div>

File Viewer Component

Responsive File Viewer Component with Dark Mode Support

Open Preview

                
<div class="container mx-auto p-6">

  <!-- File Header -->
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">File Viewer</h2>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/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="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/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 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </button>
    </div>
  </div>

  <!-- File List -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="p-4">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m3 5v-5m3 5v-5M9 8h6m-be 4h6m-3-4a3 3 0 01-3-3V4a3 3 0 013-3h2a3 3 0 013 3v1a3 3 0 01-3 3h-2a3 3 0 01-3-3z" />
          </svg>
          <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
          </div>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
        <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Download</button>
      </div>
    </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image.png</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">View</button>
        </div>
      </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-7.072a9 9 0 010 12.728m-9.193-2.829a5 5 0 010-7.072M6.343 4.515a9 9 0 010 12.728M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Audio.mp3</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">3.5 MB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Listen</button>
        </div>
      </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h18M3 16h18" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Watch</button>
        </div>
      </div>

  </div>

</div>

File Viewer Component

Responsive File Viewer Component with Dark Mode Support

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-700 shadow-lg rounded-lg p-6 w-full max-w-sm">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">File Viewer</h3>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
      </svg>
    </div>
    <div class="space-y-4">
      <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0015.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
          </svg>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Document.pdf</p>
          <p class="text-xs text-gray-500 dark:text-gray-300">1.2 MB</p>
        </div>
        <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
       <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 dark:text-green-400" 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 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" />
          </svg>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Image.png</p>
          <p class="text-xs text-gray-500 dark:text-gray-300">800 KB</p>
        </div>
        <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
       <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 012-2h2a2 2 0 012 2v6m3 0H9m1a1 1 0 00-1 1v2m1-3h0a2 2 0 012-2h2a2 2 0 012 2h0m-5-13V5a2 2 0 012-2h2a2 2 0 012 2v2M6 19a2 2 0 002-2V5a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2h2z" />
          </svg>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Archive.zip</p>
          <p class="text-xs text-gray-500 dark:text-gray-300">5.5 MB</p>
        </div>
        <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

File Viewer Component

Responsive File Viewer Component with Brutalism and Pastel Design

Open Preview

                <div class="bg-pink-100 dark:bg-gray-800 min-h-screen font-mono">
  <div class="container mx-auto p-4 lg:p-8">
    <div class="bg-white dark:bg-gray-900 shadow-xl border-4 border-black dark:border-gray-700 transform -rotate-2 hover:rotate-0 transition-transform duration-300">
      <div class="border-b-4 border-black dark:border-gray-700 px-6 py-4 flex justify-between items-center bg-yellow-200 dark:bg-yellow-700">
        <h2 class="text-2xl font-bold text-black dark:text-white">File: document.pdf</h2>
        <span class="text-sm text-gray-700 dark:text-gray-300">Size: 1.2 MB</span>
      </div>
      <div class="p-6">
        <div class="border-2 border-dashed border-gray-400 dark:border-gray-600 p-8 text-center text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800">
          <p class="mb-4">Content preview unavailable for this file type.</p>
          <svg class="mx-auto h-12 w-12 text-gray-500 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
          </svg>
        </div>
        
        <div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
          <h3 class="text-xl font-bold mb-4 text-black dark:text-white">File Details</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-800 dark:text-gray-200">
            <div><strong>Type:</strong> PDF Document</div>
            <div><strong>Date Uploaded:</strong> 2023-10-27</div>
            <div><strong>Author:</strong> John Doe</div>
            <div><strong>Last Modified:</strong> 2023-10-27</div>
          </div>
        </div>

        <div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
          <h3 class="text-xl font-bold mb-4 text-black dark:text-white">Actions</h3>
          <div class="flex space-x-4">
            <button class="bg-blue-500 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform -skew-x-6 hover:skew-x-0 transition-transform duration-300">Download</button>
            <button class="bg-green-500 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform skew-x-6 hover:skew-x-0 transition-transform duration-300">Share</button>
            <button class="bg-red-500 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform -rotate-3 hover:rotate-0 transition-transform duration-300">Delete</button>
          </div>
        </div>

         <div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
          <h3 class="text-xl font-bold mb-4 text-black dark:text-white">Comments</h3>
          <div class="space-y-4">
            <div class="bg-gray-100 dark:bg-gray-700 p-4 border-2 border-black dark:border-gray-600 transform rotate-1 hover:rotate-0 transition-transform duration-300">
              <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full mr-4 border-2 border-black dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                <div class="text-sm">
                  <div class="font-bold text-black dark:text-white">Commenter Name</div>
                  <div class="text-gray-600 dark:text-gray-400 text-xs">2 hours ago</div>
                </div>
              </div>
              <p class="text-gray-800 dark:text-gray-200">This is a sample comment on the file. The Brutalist design elements make it stand out!</p>
            </div>
             <div class="bg-gray-100 dark:bg-gray-700 p-4 border-2 border-black dark:border-gray-600 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
              <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full mr-4 border-2 border-black dark:border-gray-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
                <div class="text-sm">
                  <div class="font-bold text-black dark:text-white">Another Commenter</div>
                  <div class="text-gray-600 dark:text-gray-400 text-xs">1 hour ago</div>
                </div>
              </div>
              <p class="text-gray-800 dark:text-gray-200">The pastel colors are a nice touch with the brutalist style.</p>
            </div>
          </div>
           <div class="mt-4">
            <textarea class="w-full p-4 border-2 border-black dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 font-mono" rows="4" placeholder="Add a comment..."></textarea>
            <button class="mt-2 bg-purple-500 dark:bg-purple-700 hover:bg-purple-700 dark:hover:bg-purple-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform skew-y-3 hover:skew-y-0 transition-transform duration-300">Post Comment</button>
          </div>
        </div>

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

File Viewer Component

A responsive File Viewer component with Material Design styling and dark mode support using Tailwind CSS. The component displays a list of files with icons, names, sizes, and modification dates.

Open Preview

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">File Viewer</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-gray-50 dark:bg-gray-700">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Size</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Modified</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-6 w-6">
                <svg class="h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0015.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">document.pdf</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">1.5 MB</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">2023-10-27</div>
          </td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-6 w-6">
                 <svg class="h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">image.png</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">850 KB</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">2023-10-26</div>
          </td>
        </tr>
         <tr>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-6 w-6">
                 <svg class="h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.10029 14.8997C4.22386 13.6134 3.81964 12.0664 3.97581 10.5151C4.13198 8.96377 4.84178 7.53822 5.97267 6.40733C7.10356 5.27644 8.52911 4.56664 10.0804 4.41047C11.6317 4.2543 13.1786 4.65851 14.4649 5.53494L16.3849 3.61494C14.7782 2.47673 12.9008 1.92559 10.9819 2.04503C9.06292 2.16446 7.25865 2.94219 5.86696 4.21745C4.47527 5.49271 3.58024 7.18303 3.31396 9.00109C3.04769 10.8191 3.42494 12.7003 4.38029 14.2997L5.10029 14.8997ZM18.8997 9.10029C19.7761 10.3866 20.1804 11.9336 20.0242 13.4849C19.868 15.0362 19.1582 16.4618 18.0273 17.5927C16.8964 18.7236 15.4709 19.4334 13.9196 19.5895C12.3683 19.7457 10.8214 19.3415 9.53506 18.4651L7.61506 20.3851C9.2218 21.5233 11.0992 22.0744 13.0181 21.955C14.9371 21.8355 16.7413 21.0578 18.133 19.7825C19.5247 18.5073 20.4198 16.817 20.686 14.9989C20.9523 13.1809 20.5751 11.2997 19.62 9.70029L18.8997 9.10029Z" stroke="#4B5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>

              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">archive.zip</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">5.2 MB</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900 dark:text-gray-300">2023-10-25</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Retro File Viewer Component

Retro/Vintage File Viewer Component with responsive layout and dark theme support. Includes a file list with icons and names, and a preview area. Uses retro-style fonts and colors.

Open Preview

                <div class="font-mono bg-gray-200 dark:bg-gray-800 min-h-screen">
  <div class="container mx-auto p-4">
    <div class="flex flex-col md:flex-row bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">

      <!-- File List -->
      <div class="w-full md:w-1/3 pr-4">
        <h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Files</h2>
        <ul>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">document.txt</span>
          </li>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">image.jpg</span>
          </li>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.668V14a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">video.mp4</span>
          </li>
        </ul>
      </div>

      <!-- File Preview -->
      <div class="w-full md:w-2/3 mt-4 md:mt-0">
        <h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Preview</h2>
        <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
          Select a file to preview
        </div>
      </div>

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

File Viewer Component

A file viewer component with 3D design, responsive effects and dark mode support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg transform transition-transform hover:scale-105 duration-300">
  <div class="dark:text-white">
    <h2 class="text-xl font-bold mb-4">File Viewer</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
        <img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
        <h3 class="font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
        <img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
        <h3 class="font-semibold text-gray-800 dark:text-white">Image.jpg</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
        <img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
        <h3 class="font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
      </div>
    </div>
  </div>
</div>

File Viewer Component

A brutalist-style file viewer component with responsive design and dark mode support using Tailwind CSS.

Open Preview

                <div class="bg-yellow-300 border-4 border-black p-4 flex flex-col space-y-4 min-h-screen dark:bg-gray-800 dark:border-white">
  <div class="bg-red-500 border-4 border-black p-4 flex items-center justify-between dark:bg-red-800 dark:border-white">
    <h1 class="text-xl font-bold text-black dark:text-white">File Viewer</h1>
    <input type="text" placeholder="Search..." class="border-4 border-black p-2 bg-yellow-100 dark:bg-gray-700 dark:border-white dark:text-white">
  </div>
  <div class="flex flex-grow space-x-4">
    <div class="w-1/4 bg-green-400 border-4 border-black p-4 overflow-y-auto dark:bg-green-700 dark:border-white">
      <h2 class="text-lg font-semibold mb-4 text-black dark:text-white">Files</h2>
      <ul class="space-y-2">
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">document_A_really_long_name.pdf</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">image_001.jpg</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">archive.zip</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">data_analysis.xlsx</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">presentation.pptx</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">script.py</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">notes.txt</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">config.json</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">report.docx</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">video.mp4</li>
      </ul>
    </div>
    <div class="w-3/4 bg-purple-400 border-4 border-black p-4 flex items-center justify-center text-black dark:bg-purple-700 dark:border-white dark:text-white">
      Select a file to view its content.
    </div>
  </div>
  <div class="bg-orange-500 border-4 border-black p-4 flex items-center justify-between dark:bg-orange-800 dark:border-white">
    <span class="text-black dark:text-white">Status: Ready</span>
    <button class="bg-white border-2 border-black px-4 py-2 font-bold dark:bg-gray-600 dark:border-white dark:text-white">Upload</button>
  </div>
</div>

File Viewer Component

A Material Design-inspired file viewer component that displays a list of files with preview images, filenames, file sizes, and a user avatar. It supports responsive design and dark theme.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold mb-4">File Viewer</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=1" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 1</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">2.3 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=2" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 2</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">1.5 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=3" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 3</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">500 KB</p>
            </div>
        </div>
    </div>
</div>

File Viewer Component

A responsive File Viewer Component designed in a brutalist style, featuring dark theme support and using Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 border border-gray-400 dark:border-gray-700 rounded-lg shadow-lg p-6 w-full max-w-3xl">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">File Viewer</h1>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-12 w-12 border-2 border-gray-600">
            <span class="ml-3 text-xl font-medium text-gray-800 dark:text-white">Uploaded by John Doe</span>
        </div>
        <div class="flex mb-4">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">File: Project Report.pdf</h2>
            <div class="ml-auto text-lg font-semibold text-gray-600 dark:text-gray-300">10 MB</div>
        </div>
        <p class="text-gray-600 dark:text-gray-300 mb-6">
            This document contains a detailed report on project progress and future milestones. Please review it carefully.
        </p>
        <img src="https://picsum.photos/600/400" alt="Placeholder Image" class="rounded-md mb-4">
        <div class="flex justify-between">
            <button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">Download</button>
            <button class="bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-400 transition duration-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Delete</button>
        </div>
    </div>
</div>

Search Components

Categories

File Viewer