Composants d’affichage du contenu
Un portfolio de conception 3D présentant des travaux ou des produits avec une palette de couleurs en niveaux de gris et un design réactif, prenant en charge le mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-10 flex flex-col items-center justify-center">
<h1 class="text-3xl font-bold mb-5 text-gray-800 dark:text-gray-200">Portfolio</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Artwork 1">
<div class="p-5">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Artwork 2">
<div class="p-5">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Artwork 3">
<div class="p-5">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
</div>
</div>
</div>
<footer class="w-full text-center mt-10 text-gray-600 dark:text-gray-400">
<p>© 2023 Your Name. All rights reserved.</p>
</footer>
</div>Composants associés
Composant Composants d’affichage de contenu
Composant d’affichage de contenu Glassmorphism avec tons de terre
Pastel3DBlogContentCard
Un composant d’affichage de contenu réactif pour les blogs ou les sections de contenu, conçu avec Tailwind CSS. Il présente une mise en page simple avec une esthétique inspirée de la 3D utilisant des ombres et des effets de survol. La palette de couleurs est un pastel doux pour le mode clair, avec un thème compatible avec le mode sombre. Le composant comprend une image, un titre, des métadonnées (auteur/date), un extrait et un bouton « Lire la suite ». Les images fictives sont utilisées à partir de picsum.photos et randomuser.me.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu simple et dynamique avec des micro-interactions, un design réactif et une prise en charge du thème sombre, adapté aux blogs et à la consommation de contenu. Utilise picsum.photos pour les images et randomuser.me pour les avatars.