レイアウトコンポーネント
マテリアルデザインの原則に基づいて設計されたレスポンシブブログレイアウトコンポーネントで、単色の配色を使用し、ダークモードをサポートします。
HTMLコード
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-6">
<div class="container mx-auto">
<header class="text-center mb-10">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
<p class="text-gray-600 dark:text-gray-400">Insights, stories, and thoughts</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200?random=1" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. In hac habitasse platea dictumst...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200?random=2" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Curabitur nec libero vel arcu elementum mattis...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
</div>
<footer class="mt-10 text-center">
<p class="text-gray-600 dark:text-gray-400">© 2023 My Blog. All rights reserved.</p>
</footer>
</div>
</div>関連コンポーネント
レイアウトコンポーネントコンポーネント
ユーザーのアクションに応答する魅力的なアニメーションを通じてマイクロインタラクションを紹介するレスポンシブレイアウトコンポーネントで、ダークモードをサポートし、Tailwind CSSを利用しています。
Glassmorphismビジネスレイアウト
アース トーンを特徴とする、Tailwind CSS を使用したダーク モードをサポートする、シンプルで応答性の高い glassmorphism レイアウト コンポーネント。
3Dデザインによるeコマースレイアウト
3Dデザイン要素を使用したeコマース向けのレスポンシブWebコンポーネントレイアウトで、補色の配色とダークテーマのサポートが組み込まれています。製品カード、ナビゲーションバー、フッターがあり、すべてTailwind CSSでスタイル設定されています。