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

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

Компонент просмотра файлов с 3D-дизайном, отзывчивыми эффектами и поддержкой темного режима.

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

HTML-код

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

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

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

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

Открытый