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
Composant Colonnes
Un composant de colonnes réactives conçu pour la présentation de portfolios avec prise en charge du mode sombre, à l’aide d’un jeu de couleurs en niveaux de gris et de Tailwind CSS.
Composant Colonnes
Un composant de colonne simple et réactif avec un thème monochrome sombre, adapté à la présentation de portfolios.
Composant Colonnes
Un composant de colonnes réactives avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.