Компонент Просмотрщик Файлов
Просмотрщик файлов в неморфном стиле для электронной коммерции, который отображает изображение и сведения о файле. Обеспечивает мягкий пользовательский интерфейс с поддержкой темных тем.
HTML-код
<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>Связанные компоненты
Компонент просмотра файлов нейроморфизма
Компонент просмотра файлов в стиле неоморфизма для социальных сетей с дополнительной цветовой схемой и умеренной сложностью. Он адаптивный и поддерживает темную тему с использованием Tailwind CSS.
Skeuomorphic_Monochromatic_File_Viewer
Сложный скевоморфный компонент просмотра файлов для маркетплейса, выполненный в монохроматической цветовой схеме. Он включает в себя список файлов, панель предварительного просмотра, кнопки действий и раздел подробной информации, при этом он полностью отзывчив и поддерживает темный режим.
Компонент Просмотрщик Файлов
Простой, отзывчивый компонент просмотра файлов с дизайном, вдохновленным бумагой/печатью, подходит для бизнес/корпоративных веб-сайтов. Имеет аналогичные цвета, семантический HTML и поддержку темного режима.