Componentes de búsqueda

Categorías

Componentes Visor de archivos

Visor de archivos

Componente para la visualización de documentos y archivos

Componente Visor de archivos

Un componente de visor de archivos receptivo con microinteracciones, colores vibrantes y soporte de modo oscuro, adecuado para el consumo de blogs o contenido. Muestra los detalles del archivo, una vista previa y las acciones relacionadas.

Abrir Vista previa

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

Componente Visor de archivos

Un componente de visor de archivos esqueuomórfico simple con colores vibrantes, diseñado para un tablero, que admite los modos claro y oscuro.

Abrir Vista previa

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

Componente Visor de archivos

Un componente de visor de archivos complejo diseñado para una cartera, con modo oscuro con colores complementarios, que muestra un árbol de archivos, vista previa del contenido e información detallada. Totalmente responsivo.

Abrir Vista previa

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

Componente Visor de archivos

Un componente de visor de archivos retro/vintage diseñado para aplicaciones de comercio electrónico. Cuenta con un esquema de color monocromático, diseño receptivo y soporte para el modo oscuro.

Abrir Vista previa

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

Componente Visor de archivos

Un componente de visor de archivos responsivo diseñado para sitios web de comercio electrónico en modo oscuro con un esquema de color monocromático. Incluye funciones interactivas como la carga de archivos y la vista previa.

Abrir Vista previa

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

Componente Visor de archivos brutalista

Un componente de visor de archivos en bruto y audaz con principios de diseño brutalistas. Presenta alto contraste, diseño poco convencional y elementos intencionalmente crudos. El componente incluye vista previa de archivos, visualización de metadatos y botones de acción en un esquema de color en escala de grises. Totalmente responsivo con soporte de modo oscuro usando Tailwind CSS dark: clases de utilidad. Adecuado para sitios web comerciales / corporativos que buscan un enfoque visual distintivo.

Abrir Vista previa

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

Componente Visor de archivos

Componente de visor de archivos responsivo con modo oscuro

Abrir Vista previa

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

Componente Visor de archivos

Un visor de archivos de estilo neumórfico para comercio electrónico que muestra una imagen y detalles del archivo. Proporciona una experiencia de interfaz de usuario suave con soporte para temas oscuros.

Abrir Vista previa

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

Componente Visor de archivos

Un componente de visor de archivos de diseño minimalista y plano adecuado para la visualización de datos en un entorno de panel con un esquema de color monocromático y soporte de tema oscuro.

Abrir Vista previa

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

Componente Visor de archivos de neumorfismo

Un componente de visor de archivos de estilo neumorfismo para redes sociales con un esquema de color complementario y complejidad moderada. Es responsivo y admite el tema oscuro usando Tailwind CSS.

Abrir Vista previa

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