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

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

Компонент просмотра файлов в стиле Neumorphism, разработанный с использованием Tailwind CSS. Он отличается адаптивным дизайном и поддержкой темных тем.

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

HTML-код

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
    <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 w-full max-w-lg">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
        <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Uploaded on April 20, 2023</p>
            </div>
        </div>
        <div class="flex flex-col">
            <div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
                <p class="text-gray-700 dark:text-gray-300">File Name: example-document.pdf</p>
                <p class="text-gray-600 dark:text-gray-400">File Size: 1.2 MB</p>
            </div>
            <div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
                <img src="https://picsum.photos/200/100" alt="Preview" class="w-full h-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-700 dark:text-gray-300">Preview of the document</p>
            </div>
            <div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4">
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Download</button>
            </div>
        </div>
    </div>
</div>

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

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

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

Открытый