Composant Colonnes
Composant Columns réactif conçu pour les blogs ou la consommation de contenu. Il présente un design plat minimaliste avec une palette de couleurs analogue et un support de thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-white">Latest Articles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Article Image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
<a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Article Image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
<a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Article Image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
<a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=4" alt="Article Image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
<a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=5" alt="Article Image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 5</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
<a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=6" alt="Article Image">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 6</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
<a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
</div>
</div>
</div>
</div>Composants associés
Brutalism_Portfolio_Columns_Component
Un composant de portfolio multi-colonnes d’inspiration brutaliste avec des couleurs sourdes, avec une grande typographie, des bordures à contraste élevé et des mises en page asymétriques. Inclut la prise en charge du mode sombre et présente des projets avec des titres, des descriptions et des images.
Colonnes Composant 49
Un composant de colonnes réactif avec un design skeuomorphe imitant les éléments du monde réel, avec la prise en charge du thème sombre et utilisant Tailwind CSS.
Composant Colonnes
Un composant de colonne simple et réactif avec un thème monochrome sombre, adapté à la présentation de portfolios.