Search Components

File Viewer

Component for viewing documents and files

File Viewer Component

A responsive file viewer component with microinteractions, vibrant colors, and dark mode support, suitable for blog or content consumption. It displays file details, a preview, and related actions.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-emerald-50 to-purple-50 dark:from-zinc-900 dark:to-slate-950 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:shadow-3xl hover:-translate-y-1 relative group">

    <!-- Header & File Info -->
    <div class="p-4 sm:p-6 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
      <div class="flex items-center gap-4">
        <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br from-emerald-500 to-lime-500 dark:from-emerald-600 dark:to-lime-600 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-105">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="currentColor">
            <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2ZM18 20V9H13V4.5L18 9Z" />
          </svg>
        </div>
        <div>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white transition-colors duration-300">Project_Report_Q3_Final.pdf</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400 transition-colors duration-300">PDF Document • 4.8 MB</p>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <button class="relative p-2 rounded-full bg-emerald-50 text-emerald-600 dark:bg-emerald-900 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-800 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 group-hover:scale-110 group-hover:rotate-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 16H11V10H13V16ZM13 8H11V6H13V8Z" />
          </svg>
          <span class="sr-only">Info</span>
          <span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">File Info</span>
        </button>
        <button class="relative p-2 rounded-full bg-purple-50 text-purple-600 dark:bg-purple-900 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-800 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 group-hover:scale-110 group-hover:-rotate-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 17L16 11H13V5H11V11H8L12 17ZM5 20H19V18H5V20Z" />
          </svg>
          <span class="sr-only">Download</span>
          <span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">Download</span>
        </button>
      </div>
    </div>

    <!-- Main Content Area: Preview & Details -->
    <div class="md:flex">
      <!-- File Preview (Left/Top) -->
      <div class="md:w-3/5 p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 flex items-center justify-center min-h-[250px] sm:min-h-[300px] md:min-h-[400px] lg:min-h-[500px] relative overflow-hidden">
        <img src="https://picsum.photos/seed/filepreview/800/600" alt="File Preview" class="object-contain max-w-full max-h-full rounded-md shadow-lg transform transition-transform duration-500 group-hover:scale-105 group-hover:brightness-110">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-50/50 via-transparent to-gray-50/50 dark:from-gray-850/50 dark:via-transparent dark:to-gray-850/50 transition-opacity duration-300 opacity-0 group-hover:opacity-100"></div>
      </div>

      <!-- File Details & Actions (Right/Bottom) -->
      <div class="md:w-2/5 p-4 sm:p-6 bg-white dark:bg-gray-800 flex flex-col justify-between">
        <div>
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-4 border-b pb-2 border-gray-100 dark:border-gray-700">Details & Activity</h3>
          <ul class="space-y-3 text-sm text-gray-700 dark:text-gray-300">
            <li class="flex justify-between items-center">
              <span class="font-medium">Type:</span>
              <span class="px-2 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 rounded-full text-xs">PDF</span>
            </li>
            <li class="flex justify-between items-center">
              <span class="font-medium">Size:</span>
              <span>4.8 MB</span>
            </li>
            <li class="flex justify-between items-center">
              <span class="font-medium">Uploaded:</span>
              <span>October 26, 2023, 10:30 AM</span>
            </li>
            <li class="flex justify-between items-center">
              <span class="font-medium">Last Modified:</span>
              <span>November 1, 2023, 03:15 PM</span>
            </li>
            <li>
              <span class="font-medium block mb-1">Access:</span>
              <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1" class="w-8 h-8 rounded-full border-2 border-emerald-400 transform transition-transform duration-300 hover:scale-125 hover:z-10">
                <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User 2" class="w-8 h-8 rounded-full border-2 border-purple-400 transform transition-transform duration-300 hover:scale-125 hover:z-10">
                <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User 3" class="w-8 h-8 rounded-full border-2 border-orange-400 transform transition-transform duration-300 hover:scale-125 hover:z-10">
                <span class="text-xs text-gray-500 dark:text-gray-400">+5 others</span>
              </div>
            </li>
          </ul>

          <div class="mt-6 sm:mt-8">
            <h4 class="font-semibold text-gray-900 dark:text-white mb-3">Recent Activity</h4>
            <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-2">
              <li class="flex items-start gap-3 relative before:content-[''] before:absolute before:left-1.5 before:top-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-purple-300 before:to-emerald-300 ">
                <span class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400 flex-shrink-0 mt-1 z-[1]"></span>
                <div>
                  <p><span class="font-medium text-gray-800 dark:text-white">Anna Smith</span> shared the file.</p>
                  <time datetime="2023-11-01T15:15:00" class="text-xs">2 hours ago</time>
                </div>
              </li>
              <li class="flex items-start gap-3 relative before:content-[''] before:absolute before:left-1.5 before:top-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-purple-300 before:to-emerald-300 ">
                <span class="w-3 h-3 rounded-full bg-emerald-500 dark:bg-emerald-400 flex-shrink-0 mt-1 z-[1]"></span>
                <div>
                  <p><span class="font-medium text-gray-800 dark:text-white">You</span> uploaded the file.</p>
                  <time datetime="2023-10-26T10:30:00" class="text-xs">6 days ago</time>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="mt-8 flex flex-col sm:flex-row gap-3">
          <button class="relative flex-1 py-3 px-6 rounded-lg bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700 text-white font-semibold transition-all duration-300 transform active:scale-95 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-75 group/btn-preview">
            <span class="relative z-10">Open in Editor</span>
            <span class="absolute inset-0 bg-emerald-400 opacity-0 group-hover/btn-preview:opacity-20 transition-opacity duration-200 rounded-lg"></span>
            <span class="absolute right-3 top-1/2 -translate-y-1/2 group-hover/btn-preview:translate-x-1 transition-transform duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z"/></svg>
            </span>
          </button>
          <button class="relative flex-1 py-3 px-6 rounded-lg bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-white font-semibold transition-all duration-300 transform active:scale-95 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 group/btn-share">
            <span class="relative z-10">Share</span>
            <span class="absolute inset-0 bg-purple-400 opacity-0 group-hover/btn-share:opacity-20 transition-opacity duration-200 rounded-lg"></span>
            <span class="absolute right-3 top-1/2 -translate-y-1/2 group-hover/btn-share:translate-x-1 transition-transform duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M18 16.08C17.24 16.08 16.56 16.37 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.15C16.44 7.63 17.12 7.92 18 7.92C19.66 7.92 21 6.58 21 5C21 3.34 19.66 2 18 2S15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.85C7.56 9.37 6.88 9.08 6 9.08C4.34 9.08 3 10.42 3 12S4.34 14.92 6 14.92C6.88 14.92 7.56 14.63 8.04 14.15L15.09 18.3C15.04 18.53 15 18.76 15 19C15 20.66 16.34 22 18 22S21 20.66 21 19C21 17.34 19.66 16.08 18 16.08Z"/></svg>
            </span>
          </button>
        </div>

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

File Viewer Component

A simple skeuomorphic file viewer component with vibrant colors, designed for a dashboard, supporting light and dark modes.

Open Preview

                <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>

File Viewer Component

A complex file viewer component designed for a portfolio, featuring dark mode with complementary colors, showing a file tree, content preview, and detailed information. Fully responsive.

Open Preview

                <div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-950 transition-colors duration-300">
  <div class="container mx-auto rounded-lg shadow-xl overflow-hidden md:flex flex-col md:flex-row dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
    <!-- Sidebar / File Tree -->
    <div class="w-full md:w-1/4 bg-gray-50 dark:bg-gray-850 p-4 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 flex-shrink-0">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100 flex items-center">
        <svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-400" 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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
        </svg>
        Projects
      </h3>
      <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
        <li>
          <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
            <svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
            </svg>
            <span class="font-medium">My Portfolio (Active)</span>
          </button>
          <ul class="ml-4 mt-1 space-y-1">
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md bg-indigo-50 dark:bg-orange-950 text-indigo-700 dark:text-orange-300 font-semibold hover:bg-indigo-100 dark:hover:bg-orange-900 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-indigo-600 dark:text-orange-400" 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="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"></path>
                </svg>
                README.md
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-emerald-500 dark:text-emerald-400" 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 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"></path>
                </svg>
                index.html
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-400" 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="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"></path>
                </svg>
                styles.css
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-blue-500 dark:text-blue-400" 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.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5.293a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0012.586 2H7a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V10h-6z"></path>
                </svg>
                script.js
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-purple-500 dark:text-purple-400" 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>
                assets/
              </button>
            </li>
          </ul>
        </li>
        <li>
          <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
            <svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
            </svg>
            Old Projects
          </button>
        </li>
      </ul>
    </div>

    <!-- Main Content / File Preview -->
    <div class="flex-1 flex flex-col">
      <!-- Top Bar / File Name & Actions -->
      <div class="bg-white dark:bg-gray-850 p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between flex-wrap gap-2">
        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-100 flex items-center">
          <svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-400" 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="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"></path>
          </svg>
          README.md
        </h2>
        <div class="flex space-x-2">
          <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700 dark:focus:ring-orange-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            <svg class="-ml-0.5 mr-2 h-4 w-4" 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>
            Preview
          </button>
          <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:focus:ring-gray-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            <svg class="-ml-0.5 mr-2 h-4 w-4" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
            Edit
          </button>
        </div>
      </div>

      <!-- File Content / Preview Area -->
      <div class="flex-grow overflow-y-auto p-6 bg-white dark:bg-gray-900 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-gray-200 dark:scrollbar-track-gray-800">
        <div class="prose dark:prose-invert max-w-none text-gray-800 dark:text-gray-200">
          <h1 class="text-3xl font-bold mb-4 text-indigo-700 dark:text-orange-400">README.md - My Portfolio</h1>
          <p class="mb-4">Welcome to my personal portfolio project! This repository showcases a collection of my best work in web development, focusing on responsive design, modern UI/UX, and performance.</p>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Features:</h2>
          <ul class="list-disc list-inside space-y-2 mb-4">
            <li>Fully responsive design for desktop, tablet, and mobile.</li>
            <li>Implemented with <strong class="text-indigo-600 dark:text-orange-400">HTML5</strong>, <strong class="text-indigo-600 dark:text-orange-400">CSS3</strong> (Tailwind CSS), and Vanilla <strong class="text-indigo-600 dark:text-orange-400">JavaScript</strong>.</li>
            <li>Dark mode support for reduced eye strain.</li>
            <li>Interactive components and smooth animations.</li>
            <li>Optimized for performance and accessibility.</li>
          </ul>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Sections:</h2>
          <ol class="list-decimal list-inside space-y-2 mb-4">
            <li><strong>Home:</strong> Introduction and quick overview.</li>
            <li><strong>About Me:</strong> My background, skills, and values.</li>
            <li><strong>Projects:</strong> Detailed view of key projects with live demos and source code.</li>
            <li><strong>Contact:</strong> How to get in touch.</li>
          </ol>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Technologies Used:</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=1" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              HTML5
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=2" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              Tailwind CSS
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=3" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              JavaScript
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=4" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              Responsive Design
            </span>
          </div>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Setup:</h2>
          <p class="mb-4">To run this project locally, clone the repository and open <code>index.html</code> in your browser.</p>
          <pre class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 text-sm overflow-x-auto border border-gray-200 dark:border-gray-700"><code class="text-gray-800 dark:text-gray-200">git clone https://github.com/yourusername/my-portfolio.git
cd my-portfolio
# Open index.html in your browser</code></pre>
          <p class="mt-4 text-gray-600 dark:text-gray-400">Feel free to explore and provide feedback. Thank you for visiting!</p>
        </div>
      </div>

      <!-- File Details / Bottom Bar (optional, could also be on the side) -->
      <div class="bg-white dark:bg-gray-850 p-4 border-t border-gray-200 dark:border-gray-800 text-sm text-gray-600 dark:text-gray-300 flex justify-between items-center flex-wrap gap-2">
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Updated:</span> 2 hours ago by
          <img class="inline-block h-6 w-6 rounded-full ring-2 ring-indigo-300 dark:ring-orange-600 ml-1 mr-1" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="font-medium text-gray-700 dark:text-gray-200">John Doe</span>
        </div>
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Size:</span> 1.2 KB
        </div>
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Type:</span> Markdown File
        </div>
      </div>
    </div>
  </div>
</div>

File Viewer Component

A retro/vintage file viewer component designed for e-commerce applications. It features a monochromatic color scheme, responsive design, and support for dark mode.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-2xl font-bold text-center mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Name</h3>
            <p class="text-gray-300 dark:text-gray-400">example_file.pdf</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Uploaded By</h3>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <p class="text-gray-300 dark:text-gray-400">John Doe</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Preview</h3>
            <img src="https://picsum.photos/200/100" alt="File Preview" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Actions</h3>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Download</button>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Delete</button>
        </div>
    </div>
</div>

File Viewer Component

A responsive file viewer component designed for e-commerce websites in dark mode with a monochromatic color scheme. It includes interactive features like file upload and preview.

Open Preview

                <div class="bg-gray-800 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-semibold mb-4">File Viewer</h2>
    <div class="mb-4">
        <label class="block mb-2">Upload File:</label>
        <input type="file" class="bg-gray-900 text-gray-200 p-2 border border-gray-600 rounded w-full" />
    </div>
    <div class="mt-4">
        <h3 class="text-xl mb-2">File Preview:</h3>
        <div class="bg-gray-700 p-4 rounded">
            <img src="https://picsum.photos/300/200" alt="Preview" class="w-full rounded" />
        </div>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2" />
            <div>
                <span class="font-bold">Uploaded by:</span> John Doe
            </div>
        </div>
    </div>
    <div class="mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
            Confirm Upload
        </button>
    </div>
</div>

Brutalist File Viewer Component

A raw, bold file viewer component with brutalist design principles. Features high contrast, unconventional layout, and intentionally crude elements. The component includes file preview, metadata display, and action buttons in a stark grayscale color scheme. Fully responsive with dark mode support using Tailwind CSS dark: utility classes. Suitable for business/corporate websites seeking a distinctive visual approach.

Open Preview

                <!-- Brutalist File Viewer Component -->
<div class="w-full bg-white dark:bg-gray-900 border-4 border-black dark:border-gray-700 p-4 md:p-6 font-mono">
  <!-- Component Header -->
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b-8 border-black dark:border-gray-700 pb-4">
    <h2 class="text-3xl md:text-4xl font-black uppercase tracking-tighter text-black dark:text-white">FILE VIEWER</h2>
    <div class="mt-3 md:mt-0 bg-black dark:bg-gray-800 text-white dark:text-gray-200 px-4 py-2 text-sm tracking-widest">
      FILES: <span class="font-bold">14</span> | STORAGE: <span class="font-bold">64%</span>
    </div>
  </div>

  <!-- File Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Featured File - Takes up more space -->
    <div class="col-span-1 md:col-span-2 border-4 border-black dark:border-gray-700 flex flex-col">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">QUARTERLY_REPORT.PDF</span>
        <span class="text-xs bg-white text-black dark:bg-gray-600 dark:text-white px-2 py-1">PINNED</span>
      </div>
      <div class="h-64 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/800/500" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-40 dark:opacity-60"></div>
        <div class="absolute bottom-0 left-0 w-full p-3 text-white">
          <div class="mb-1 text-xl font-bold uppercase">Q4 Financial Report</div>
          <div class="text-sm opacity-80">Last modified: Yesterday at 14:23</div>
        </div>
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="flex items-center space-x-1">
          <span class="inline-block w-3 h-3 bg-black dark:bg-white rounded-full"></span>
          <span class="text-xs text-black dark:text-gray-200">12.4 MB</span>
        </div>
        <div class="flex space-x-2">
          <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-4 py-2 text-xs uppercase tracking-wider font-bold">Open</button>
          <button class="bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-white border-2 border-black dark:border-gray-700 px-4 py-2 text-xs uppercase tracking-wider font-bold">Download</button>
        </div>
      </div>
    </div>

    <!-- Standard File Cards -->
    <div class="border-4 border-black dark:border-gray-700">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">PRESENTATION.PPTX</span>
      </div>
      <div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="text-xs text-black dark:text-gray-200">5.7 MB</div>
        <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
      </div>
    </div>

    <div class="border-4 border-black dark:border-gray-700">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">BUDGET_2023.XLSX</span>
      </div>
      <div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/601/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="text-xs text-black dark:text-gray-200">3.2 MB</div>
        <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
      </div>
    </div>

    <div class="border-4 border-black dark:border-gray-700">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">LOGO_FINALS.ZIP</span>
      </div>
      <div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/602/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="text-xs text-black dark:text-gray-200">8.9 MB</div>
        <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Shared Users Section -->
  <div class="mt-8 border-t-4 border-black dark:border-gray-700 pt-4">
    <h3 class="text-xl font-black uppercase tracking-tight text-black dark:text-white mb-4">SHARED WITH</h3>
    <div class="flex flex-wrap items-center gap-4">
      <div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
        <div class="ml-2">
          <div class="text-sm font-bold text-black dark:text-white">K. JOHNSON</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">EDITOR</div>
        </div>
      </div>
      <div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
        <div class="ml-2">
          <div class="text-sm font-bold text-black dark:text-white">T. WILLIAMS</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">VIEWER</div>
        </div>
      </div>
      <div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
        <div class="ml-2">
          <div class="text-sm font-bold text-black dark:text-white">S. DAVIS</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">ADMIN</div>
        </div>
      </div>
      <button class="bg-black dark:bg-gray-700 text-white text-sm px-4 py-3 uppercase tracking-wider font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
        + ADD USER
      </button>
    </div>
  </div>

  <!-- Bottom Controls -->
  <div class="mt-8 flex flex-col md:flex-row justify-between items-start md:items-center border-t-8 border-black dark:border-gray-700 pt-4">
    <div class="flex flex-col mb-4 md:mb-0">
      <span class="text-xs uppercase tracking-wider text-gray-600 dark:text-gray-400 font-bold">Storage Usage</span>
      <div class="w-48 h-8 border-4 border-black dark:border-gray-700 mt-1 overflow-hidden">
        <div class="bg-black dark:bg-gray-600 h-full w-2/3"></div>
      </div>
    </div>
    <div class="flex gap-3">
      <button class="bg-white dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-gray-700 px-6 py-3 text-sm uppercase tracking-widest font-bold">
        UPLOAD NEW
      </button>
      <button class="bg-black dark:bg-gray-700 hover:bg-gray-800 dark:hover:bg-gray-600 text-white px-6 py-3 text-sm uppercase tracking-widest font-bold">
        MANAGE ALL
      </button>
    </div>
  </div>
</div>

File Viewer Component

Responsive File Viewer Component with Dark Mode

Open Preview

                <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>

File Viewer Component

A neumorphic styled file viewer for e-commerce that displays an image and file details. Provides a soft UI experience with dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <div class="mb-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 shadow-inner">
            <img class="object-cover w-full h-32" src="https://picsum.photos/400/200" alt="File Preview">
        </div>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">File Name.jpg</h2>
        <p class="text-gray-600 dark:text-gray-400">Size: 2.5 MB</p>
        <p class="text-gray-600 dark:text-gray-400">Uploaded by: <img class="inline-block w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"> John Doe</p>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow-md focus:outline-none focus:shadow-outline">Download</button>
        </div>
    </div>
</div>

File Viewer Component

A minimalist and flat design file viewer component suitable for data visualization in a dashboard setting with a monochromatic color scheme and dark theme support.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
  <h2 class="text-xl text-gray-100 dark:text-gray-200 mb-4">File Viewer</h2>
  <div class="flex flex-col md:flex-row justify-between mb-4">
    <div class="w-full md:w-2/3">
      <img src="https://picsum.photos/600/400" alt="File Preview" class="rounded-lg">
    </div>
    <div class="w-full md:w-1/3 md:ml-4">
      <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow">
        <h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">File Details</h3>
        <p class="text-gray-300 dark:text-gray-400">Name: Example File.pdf</p>
        <p class="text-gray-300 dark:text-gray-400">Size: 2.5 MB</p>
        <p class="text-gray-300 dark:text-gray-400">Date: 2023-10-05</p>
        <div class="mt-4">
          <button class="bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg">Download</button>
          <button class="bg-red-600 hover:bg-red-500 text-white font-semibold py-2 px-4 rounded-lg ml-2">Delete</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col"> 
    <h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">Comments</h3>
    <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <h4 class="text-gray-300 dark:text-gray-400">John Doe</h4>
          <p class="text-gray-400 dark:text-gray-500">Great file!</p>
        </div>
      </div>
    </div>
    <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <h4 class="text-gray-300 dark:text-gray-400">Jane Doe</h4>
          <p class="text-gray-400 dark:text-gray-500">Thanks for sharing!</p>
        </div>
      </div>
    </div>
    <div class="flex mb-2">
      <input type="text" placeholder="Add a comment..." class="flex-grow border border-gray-600 bg-gray-700 dark:bg-gray-800 text-gray-200 dark:text-gray-300 rounded-lg py-2 px-4 mr-2" />
      <button class="bg-green-500 hover:bg-green-400 text-white font-semibold py-2 px-4 rounded-lg">Post</button>
    </div>
  </div>
</div>

Neumorphism File Viewer Component

A Neumorphism-styled File Viewer Component for social media with a complementary color scheme and moderate complexity. It is responsive and supports dark theme using Tailwind CSS.

Open Preview

                <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>

Search Components

Categories

File Viewer