Componente Modal Retro Vintage
Un componente modal retro/vintage simple con un esquema de color complementario para exhibir trabajos o productos, diseñado con Tailwind CSS.
Código HTML
<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-80 dark:bg-black dark:bg-opacity-90"> <div class="bg-yellow-300 dark:bg-yellow-700 text-gray-800 dark:text-gray-200 rounded-lg p-6 max-w-md w-full shadow-lg"> <h2 class="text-lg font-bold mb-4">My Portfolio Item</h2> <img class="mb-4 rounded" src="https://picsum.photos/300/200" alt="Portfolio Item"> <p class="mb-4">This is a short description of the portfolio item showcasing the work or product. Explore more to find out how it can benefit you!</p> <div class="flex items-center"> <img class="rounded-full w-10 h-10 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> <span class="font-semibold">John Doe</span> </div> <div class="mt-6 flex justify-end"> <button class="bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded">Close</button> </div> </div></div>
Componentes relacionados
Componente modal de modo oscuro
Un componente modal responsivo simple diseñado para interfaces de redes sociales en modo oscuro con un esquema de color pastel.
Componente Modal Retro Vintage
Un componente modal retro/vintage receptivo diseñado con Tailwind CSS que incluye soporte para el modo oscuro y una estética nostálgica de los 80/90.
RetroVintageEarthToneModal
Componente modal retro/vintage en tonos tierra para el salpicadero con modo oscuro y capacidad de respuesta