Composant de conteneur
Composant de conteneur réactif avec mode sombre
HTML Code
<div class="container mx-auto px-4 py-8 dark:bg-gray-800">
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl dark:bg-gray-700">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/200/300" alt="Random image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Case Study</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Innovating with Microinteractions</a>
<p class="mt-2 text-gray-500 dark:text-gray-300">Exploring the power of small, engaging animations to enhance user experience in portfolio websites. This triadic color scheme (using shades of indigo, red, and yellow in other potential elements) provides a vibrant yet balanced feel. Moderate complexity allows for subtle hover effects and transitions.</p>
<div class="mt-4">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 dark:bg-gray-600 dark:text-gray-200">#microinteractions</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 dark:bg-gray-600 dark:text-gray-200">#tailwindcss</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:bg-gray-600 dark:text-gray-200">#portfolio</span>
</div>
</div>
</div>
</div>
</div>Composants associés
Conteneur skeeumorphe des médias sociaux
Un conteneur de médias sociaux skeuomorphe conçu avec un schéma monochromatique, avec des ombres douces, des dégradés subtils et des bords arrondis pour imiter des éléments du monde réel tels que des boutons et des cartes, adapté à l’affichage de publications ou de profils d’utilisateurs. Comprend une réactivité complète et la prise en charge du mode sombre.
Neon_Glow_Food_Container
Un composant de conteneur simple et réactif pour les sites Web d’alimentation/restauration avec des effets de néon/lueur vibrants et la prise en charge du mode sombre.
Playful_Blog_Container
Un conteneur de contenu de blog ludique et joyeux avec des éléments arrondis et des couleurs semblables à des bonbons, conçu pour la lecture et la consommation de contenu. Il est entièrement réactif et prend en charge le mode sombre.