Composants fonctionnels
Un composant doté d’un style de conception glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.
HTML Code
<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>Composants associés
Composant Composants fonctionnels - Interface utilisateur en mode sombre
Un composant de médias sociaux réactif conçu avec le mode sombre et les tons de terre, adapté aux interfaces de réseaux sociaux. Comprend des avatars d’utilisateurs, du contenu de publication et des boutons d’interaction.
Composants fonctionnels
Un composant Web imitant ses homologues du monde réel dans un style d’entreprise avec une palette de couleurs complémentaire, une mise en page simple et un design réactif avec prise en charge du mode sombre.
Paper_Print_Media_Card
Une carte multimédia simple et réactive avec un design inspiré du papier/de l’impression et une palette de couleurs pastel, avec prise en charge du mode sombre. Idéal pour les plateformes de divertissement ou de médias.