Retro Vintage Modal Component
A simple retro/vintage modal component with a complementary color scheme for showcasing work or products, designed using Tailwind CSS.
HTML Code
<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>Related Components
Complex Earthy Business Modal with Microinteractions
A complex, responsive, earth-toned Modal Component with microinteractions, suitable for business websites, supporting dark mode.
Retro Blog Modal
A retro-vintage inspired modal component for blog content, featuring a complementary color scheme, moderate complexity with interactive elements, responsive design, and dark mode support. No JavaScript is used, relying solely on HTML and Tailwind CSS classes. Images are sourced from picsum.photos and avatars from randomuser.me.
Dark Mode Modal Component
A simple and responsive dark mode modal component designed for reading and content consumption. It features a complementary color scheme and minimal layout, suitable for blog or content-driven websites.