Composant d’affichage du contenu
Composant d’affichage de contenu de style 3D présentant des travaux ou des produits de portefeuille avec une palette de couleurs en niveaux de gris et une conception réactive incluant la prise en charge du mode sombre.
HTML Code
<div class="max-w-4xl mx-auto p-6">
<h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Portfolio Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 5</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Portfolio Item" />
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 6</h3>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
</div>
</div>
</div>
</div>Composants associés
Composant d’affichage du contenu
Un composant d’affichage de contenu réactif qui intègre des micro-interactions avec des animations attrayantes axées sur les actions de l’utilisateur. Il inclut la prise en charge du mode sombre et des espaces réservés pour les images et les avatars.
Composants d’affichage du contenu
Un composant d’affichage de contenu réactif pour la consommation de blog ou de contenu avec un style de conception 3D et la prise en charge du thème sombre.
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.