Componenti funzionali Componente
Un componente con stile di design glassmorphism con effetti reattivi e supporto per temi scuri, utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 w-full max-w-md">
<div class="flex flex-row items-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">
Passionate about building intuitive and dynamic user experiences. I love coding and design.
</p>
<img class="rounded-lg shadow-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image" />
<button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Contact Me</button>
</div>
</div>
<style>
/* Dark Mode CSS */
@media (prefers-color-scheme: dark) {
.bg-opacity-30 {
background-color: rgba(255, 255, 255, 0.3);
}
}
</style>Componenti correlati
Componente funzionale del blog
Componenti funzionali Componente con design 3D, combinazione di colori complementari, complessità moderata per blog, reattivo con supporto per temi scuri. Niente JS, solo HTML e Tailwind.
Caratteristiche di gioco in evidenza
Una funzione di gioco reattiva evidenzia il componente con un design pulito e minimalista che enfatizza la tipografia e un sistema a griglia, utilizzando neutri caldi e supportando la modalità oscura. Presenta un'immagine di grandi dimensioni, un titolo, una descrizione e un pulsante di azione.
Scheda Prodotto E-commerce con Microinterazioni
Una semplice scheda prodotto per l'e-commerce con combinazione di colori triadica ed elementi di microinterazione da aggiungere al carrello e gradire, con reattività e supporto per la modalità scura.