Retro Vintage Modal Komponente
Eine einfache Retro-/Vintage-Modalkomponente mit einem komplementären Farbschema für die Präsentation von Arbeiten oder Produkten, die mit Tailwind CSS entworfen wurde.
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>Verwandte Komponenten
Retro Blog Modal
Eine Retro-Vintage-inspirierte modale Komponente für Blog-Inhalte mit einem komplementären Farbschema, moderater Komplexität mit interaktiven Elementen, responsivem Design und Unterstützung für den Dunkelmodus. Es wird kein JavaScript verwendet, sondern verlässt sich ausschließlich auf HTML- und Tailwind-CSS-Klassen. Die Bilder stammen von picsum.photos und die Avatare von randomuser.me.
Materialdesign Modal
Eine Modal-Komponente im Material Design-Stil mit responsivem Design und Unterstützung für dunkle Themen. Enthält ein modales Overlay, einen modalen Container mit einem kartenähnlichen Aussehen und eine Schaltfläche zum Schließen. Es ist kein JavaScript enthalten.
Retro Vintage Modal Komponente
Eine reaktionsschnelle Retro-/Vintage-Modal-Komponente, die mit Tailwind CSS entwickelt wurde und Unterstützung für den Dunkelmodus und nostalgische Ästhetik der 80er/90er Jahre bietet.