Компонент Просмотрщик Файлов
Адаптивный компонент просмотра файлов, предназначенный для сайтов электронной коммерции в темном режиме с монохроматической цветовой гаммой. Он включает в себя интерактивные функции, такие как загрузка файлов и предварительный просмотр.
HTML-код
<div class="bg-gray-800 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-semibold mb-4">File Viewer</h2>
<div class="mb-4">
<label class="block mb-2">Upload File:</label>
<input type="file" class="bg-gray-900 text-gray-200 p-2 border border-gray-600 rounded w-full" />
</div>
<div class="mt-4">
<h3 class="text-xl mb-2">File Preview:</h3>
<div class="bg-gray-700 p-4 rounded">
<img src="https://picsum.photos/300/200" alt="Preview" class="w-full rounded" />
</div>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2" />
<div>
<span class="font-bold">Uploaded by:</span> John Doe
</div>
</div>
</div>
<div class="mt-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
Confirm Upload
</button>
</div>
</div>Связанные компоненты
Компонент Просмотрщик Файлов
Скевоморфный компонент просмотра файлов с пастельной цветовой гаммой, разработанный для электронной коммерции, отличающийся адаптивной версткой и поддержкой темного режима. Он имитирует физическую папку с вкладками и областью содержимого.
Компонент Просмотрщик Файлов
Сложный, отзывчивый компонент просмотра файлов с фирменным/профессиональным стилем, аналогичной цветовой схемой и поддержкой темного режима, подходящий для бизнес-среды.
Компонент Просмотрщик Файлов
Сложный, отзывчивый компонент просмотра файлов с дизайном в стиле Баухаус с использованием аналогичных цветов, подходящий для досок объявлений и платформ для развития карьеры. Включает поддержку темного режима.