Composantes interactives Composante 25
Un composant interactif de style Material Design avec une disposition en grille, un design réactif et la prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>
<div class="mt-4">
<img class="w-full rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random Image">
</div>
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Me</h3>
<p class="text-gray-600 dark:text-gray-400">I'm a passionate software engineer with experience in building web applications. I love coding and exploring new technologies.</p>
</div>
<div class="mt-4 flex justify-between">
<a href="#" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Connect</a>
<a href="#" class="px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:border-gray-400 dark:border-gray-700 dark:text-gray-400">Message</a>
</div>
</div>Composants associés
Composante des composantes interactives
Composant de composants interactifs avec un design minimaliste/plat, une palette de couleurs de tons de terre et un niveau de complexité complexe pour un tableau de bord, mis en œuvre avec Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
Composante des composantes interactives
Un composant interactif avec un design Glassmorphism, une palette de couleurs pastel et une mise en page simple pour le contenu du blog. Il est réactif et inclut la prise en charge du mode sombre.
Composante des composantes interactives
Un composant interactif minimaliste, dynamique et simple conçu pour les plateformes de divertissement et de médias, avec des commandes de lecture/pause, une barre de progression et un contrôle du volume des haut-parleurs. Comprend une réactivité complète et la prise en charge du mode sombre.