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 selon les principes de Material Design, utilisant Tailwind CSS pour le style, la prise en charge des thèmes sombres et les animations réactives.
Composant de colonnes de fabrication d’entreprise/professionnel
Un composant de colonnes complexe et réactif conçu pour les entreprises manufacturières/industrielles avec une esthétique d’entreprise/professionnelle et une palette de couleurs automnale. Inclut la prise en charge du mode sombre et du HTML sémantique.