Composant Composants de mise en page
Un composant de mise en page réactive présentant des micro-interactions par le biais d’animations attrayantes qui répondent aux actions de l’utilisateur, avec prise en charge du mode sombre et de l’utilisation de Tailwind CSS.
HTML Code
<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">User Profile</h2>
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full shadow-md transform hover:scale-110 transition-transform duration-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">Software Developer</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Follow</button>
</div>
<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 mt-6">
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">Images Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=1" alt="Random Image">
<img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=2" alt="Random Image">
<img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=3" alt="Random Image">
</div>
</div>
<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 mt-6">
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">Contact Us</h2>
<form>
<input type="text" placeholder="Your Name" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300" />
<input type="email" placeholder="Your Email" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300" />
<textarea placeholder="Your Message" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300"></textarea>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Send Message</button>
</form>
</div>Composants associés
Glassmorphism Disposition du tableau de bord
Une disposition simple pour un tableau de bord avec des éléments translucides ressemblant à du verre givré, avec une palette de couleurs pastel et une prise en charge du mode sombre.
Composants de mise en page
Il s’agit d’un composant de mise en page complexe conçu pour les blogs et la consommation de contenu, avec des micro-interactions et une palette de couleurs complémentaires. Il comprend divers éléments interactifs et prend en charge le mode sombre.
Composant de mise en page du commerce électronique
Un composant de mise en page e-commerce simple et réactif avec une esthétique Material Design en niveaux de gris, avec une grille de produits, un en-tête et un pied de page, le tout avec prise en charge du mode sombre. Utilise picsum.photos pour les images de produits.