Composant Galerie
Composant de galerie réactive avec conception 3D, schéma de couleurs analogues et prise en charge du mode sombre pour les interfaces de médias sociaux.
HTML Code
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
<div class="-m-1 flex flex-wrap md:-m-2">
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=1"
style="transform: translateZ(10px);"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=2"
style="transform: translateZ(10px);"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=3"
style="transform: translateZ(10px);"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=4"
style="transform: translateZ(10px);"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=5"
style="transform: translateZ(10px);"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=6"
style="transform: translateZ(10px);"
/>
</div>
</div>
</div>
</div>Composants associés
Composant Galerie
Un composant de galerie réactif utilisant Tailwind CSS avec un design Skeuomorphism, une palette de couleurs pastel et une complexité modérée à des fins de médias sociaux. Inclut la prise en charge du mode sombre et utilise picsum.photos pour les images et randomuser.me pour les avatars.
Composant Galerie
Un composant de galerie de style rétro vintage avec des effets réactifs et la prise en charge du thème sombre.
Composant Galerie 3D
Un composant de galerie 3D réactif complexe conçu pour le commerce électronique, avec un thème sombre et une palette de couleurs complémentaire.