Components Modal Retro Vintage Modal Component

Retro Vintage Modal Component

A simple retro/vintage modal component with a complementary color scheme for showcasing work or products, designed using Tailwind CSS.

Preview

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

Industrial_Sepia_Medical_Modal

A simple, responsive modal component with an industrial, raw-materials aesthetic, using sepia/brown tones, designed for healthcare/medical applications, with dark mode support.

Open

Skeuomorphic Modal

A simple, responsive, skeuomorphic-inspired modal component for entertainment/media platforms, featuring cool neutral colors and dark mode support.

Open

Material Design Modal

A Material Design-styled Modal Component with responsive design and dark theme support. Includes a modal overlay, a modal container with a card-like appearance, and a close button. No JavaScript is included.

Open