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

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

Компонент просмотра файлов, вдохновленный Material Design, который отображает список файлов с изображениями предварительного просмотра, именами файлов, размерами файлов и аватаром пользователя. Он поддерживает адаптивный дизайн и темную тему.

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

HTML-код

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

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

Компонент просмотра ретро-файлов

Компонент просмотра файлов в стиле ретро/винтаж с адаптивным макетом и поддержкой темных тем. Включает список файлов со значками и именами, а также область предварительного просмотра. Использует шрифты и цвета в стиле ретро.

Открытый

Компонент просмотра файлов нейроморфизма

Компонент просмотра файлов в стиле неоморфизма для социальных сетей с дополнительной цветовой схемой и умеренной сложностью. Он адаптивный и поддерживает темную тему с использованием Tailwind CSS.

Открытый

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

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

Открытый