Компоненты Просмотрщик файлов Компонент Просмотрщик Файлов

Компонент Просмотрщик Файлов

Адаптивный компонент просмотра файлов для электронной коммерции с 3D-дизайном, дополнительной цветовой схемой и простой версткой, поддерживающий темный режим с использованием Tailwind CSS. В нем отображаются файлы или документы продукта.

Предварительный просмотр

HTML-код

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

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

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

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

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

  </div>
</div>

Связанные компоненты

Бруталистский компонент просмотра файлов

Грубый, жирный компонент просмотра файлов с брутальными принципами дизайна. Отличается высокой контрастностью, нетрадиционной компоновкой и намеренно грубыми элементами. Компонент включает в себя предварительный просмотр файлов, отображение метаданных и кнопки действий в строгой цветовой схеме оттенков серого. Полностью адаптивный с поддержкой темного режима с использованием служебных классов Tailwind CSS dark: . Подходит для бизнес/корпоративных сайтов, ищущих отличительный визуальный подход.

Открытый