列コンポーネント
ブログやコンテンツの使用用に設計されたレスポンシブな Columns コンポーネント。ミニマリストのフラットデザインと、類似の配色とダークテーマのサポートが特徴です。
HTMLコード
<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>関連コンポーネント
企業/プロフェッショナル製造カラムコンポーネント
製造業/工業企業向けに設計された、複雑で応答性の高い列コンポーネントで、企業/プロフェッショナルな美学と秋の配色を備えています。ダークモードのサポートとセマンティックHTMLが含まれています。
Luxury_Job_Board_Columns_Component
求人掲示板やキャリア開発プラットフォーム向けの高級/プレミアムな単色コラムコンポーネント。エレガントなタイポグラフィ、豊富なインターフェイス要素、完全な応答性、ダークモードのサポートを備えた洗練されたデザインが特徴です。