Componente Visor de archivos
Un componente de visor de archivos de diseño minimalista y plano adecuado para la visualización de datos en un entorno de panel con un esquema de color monocromático y soporte de tema oscuro.
Código HTML
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h2 class="text-xl text-gray-100 dark:text-gray-200 mb-4">File Viewer</h2>
<div class="flex flex-col md:flex-row justify-between mb-4">
<div class="w-full md:w-2/3">
<img src="https://picsum.photos/600/400" alt="File Preview" class="rounded-lg">
</div>
<div class="w-full md:w-1/3 md:ml-4">
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow">
<h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">File Details</h3>
<p class="text-gray-300 dark:text-gray-400">Name: Example File.pdf</p>
<p class="text-gray-300 dark:text-gray-400">Size: 2.5 MB</p>
<p class="text-gray-300 dark:text-gray-400">Date: 2023-10-05</p>
<div class="mt-4">
<button class="bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg">Download</button>
<button class="bg-red-600 hover:bg-red-500 text-white font-semibold py-2 px-4 rounded-lg ml-2">Delete</button>
</div>
</div>
</div>
</div>
<div class="flex flex-col">
<h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">Comments</h3>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-gray-300 dark:text-gray-400">John Doe</h4>
<p class="text-gray-400 dark:text-gray-500">Great file!</p>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-gray-300 dark:text-gray-400">Jane Doe</h4>
<p class="text-gray-400 dark:text-gray-500">Thanks for sharing!</p>
</div>
</div>
</div>
<div class="flex mb-2">
<input type="text" placeholder="Add a comment..." class="flex-grow border border-gray-600 bg-gray-700 dark:bg-gray-800 text-gray-200 dark:text-gray-300 rounded-lg py-2 px-4 mr-2" />
<button class="bg-green-500 hover:bg-green-400 text-white font-semibold py-2 px-4 rounded-lg">Post</button>
</div>
</div>
</div>Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para temas oscuros.
Componente Visor de archivos
Un componente de visor de archivos receptivo para comercio electrónico con diseño 3D, combinación de colores complementaria y diseño simple, compatible con el modo oscuro con Tailwind CSS. Muestra archivos o documentos de productos.
Componente Visor de archivos
Un componente de visor de archivos nostálgico inspirado en la estética retro de los años 80/90, diseñado con Tailwind CSS y compatible con efectos responsivos y temas oscuros.