Composant Colonnes
Un composant de colonne simple et réactif avec un thème monochrome sombre, adapté à la présentation de portfolios.
HTML Code
<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum1/400/300" alt="Project 1">
<h3 class="text-xl font-semibold mb-2">Project One</h3>
<p class="text-gray-400 text-sm">A brief description of project one, highlighting its key features and technologies used.</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum2/400/300" alt="Project 2">
<h3 class="text-xl font-semibold mb-2">Project Two</h3>
<p class="text-gray-400 text-sm">Another project description, focusing on the impact and results of the work.</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum3/400/300" alt="Project 3">
<h3 class="text-xl font-semibold mb-2">Project Three</h3>
<p class="text-gray-400 text-sm">Description for the third project, detailing the creative process and solutions.</p>
</div>
</div>
</div>Composants associés
Composant Colonnes
Un composant de colonnes réactives conçu avec Glassmorphism, en utilisant un schéma de couleurs triadique pour un site Web d’entreprise. Il présente des éléments translucides givrés ressemblant à du verre givré, des effets de flou et convient au mode sombre.
Composant Colonnes
Un composant de colonnes réactif conçu dans un style brutaliste avec des tons de terre, adapté au commerce électronique, avec une complexité moyenne et une prise en charge du thème sombre.