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
Neon_Glow_Gaming_Layout
Un composant de mise en page de jeu complexe et réactif avec des effets de néon/lueur et une palette de couleurs en niveaux de gris, prenant en charge le mode sombre.
Glassmorphism Aménagement d’entreprise
Un composant de mise en page glassmorphism simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS, avec des tons de terre.
Composant Composants de mise en page
Une mise en page de composant Web réactive suivant les principes de conception matérielle pour une application de médias sociaux avec prise en charge du thème sombre.