Componente modale modalità oscura
Un semplice componente modale reattivo progettato per le interfacce dei social media in modalità oscura con una combinazione di colori pastello.
Codice HTML
<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-gray-800">
<div class="bg-gray-800 rounded-lg shadow-lg w-11/12 md:w-1/3 p-6">
<h2 class="text-xl font-bold text-white mb-4">Welcome to Our Community!</h2>
<p class="text-gray-300 mb-4">Join us in sharing ideas, experiences, and connecting with one another. We believe in the power of community.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
<span class="text-pink-200 font-semibold">John Doe</span>
</div>
<img src="https://picsum.photos/300/150" alt="Placeholder" class="rounded-lg mb-4">
<button class="w-full bg-pink-500 hover:bg-pink-400 text-white font-bold py-2 px-4 rounded">Join Now</button>
<button class="w-full mt-2 bg-transparent border border-pink-500 hover:bg-pink-500 hover:text-white text-pink-500 font-bold py-2 px-4 rounded">Cancel</button>
</div>
</div>Componenti correlati
Cyberpunk Apprendimento modale
Un componente modale reattivo a tema cyberpunk per piattaforme educative, con sfondi scuri, accenti al neon ed elementi interattivi. Supporta la modalità oscura.
Componente modale vintage retrò
Un componente modale reattivo retrò/vintage progettato con Tailwind CSS che include il supporto della modalità oscura e un'estetica nostalgica degli anni '80/'90.
Componente modale
Un componente modale complesso, reattivo e interattivo per l'e-commerce, con combinazione di colori complementari e microinterazioni per il coinvolgimento degli utenti. Supporta il tema scuro.