Composants Capital Composant modal rétro vintage

Composant modal rétro vintage

Un composant modal rétro/vintage réactif conçu avec Tailwind CSS qui inclut la prise en charge du mode sombre et l’esthétique nostalgique des années 80/90.

Aperçu

HTML Code

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 transition-opacity" id="modal-wrapper">
    <div class="bg-white rounded-lg shadow-lg max-w-md w-full p-6 sm:p-8">
        <div class="flex justify-between items-center">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-300">Retro Modal Title</h2>
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none" id="modal-close">
                &times;
            </button>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">This is a nostalgic modal component inspired by the vintage aesthetics of the 80s and 90s. It features a simple layout and dark mode support.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="mt-6 flex justify-end">
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Action</button>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        #modal-wrapper {
            background-color: rgba(31, 41, 55, 0.75);
        }
    }
</style>

Composants associés

Tableau de bord Neon Modal

Un modal de tableau de bord complexe et réactif avec des effets de néon/lueur, utilisant des couleurs d’automne, la prise en charge du mode sombre et des éléments interactifs. Conçu pour la visualisation de données et les panneaux de contrôle.

Ouvrir

Composant modal rétro vintage

Un composant modal rétro/vintage simple avec une palette de couleurs complémentaire pour présenter des travaux ou des produits, conçu à l’aide de Tailwind CSS.

Ouvrir

Organic_Nature_Modal_Documentation

Un composant modal simple et réactif avec un design organique/inspiré de la nature utilisant des tons de terre, adapté à la documentation ou aux sites wiki. Inclut la prise en charge du mode sombre.

Ouvrir