レイアウトコンポーネントコンポーネント
現実世界の対応物を模倣したスキューモーフィック スタイルで設計されたレイアウト コンポーネントで、レスポンシブ要素と Tailwind CSS を使用したダーク テーマのサポートを備えています。
HTMLコード
<div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
<header class="bg-white dark:bg-gray-800 shadow-md flex justify-between items-center p-4 rounded-lg">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">My Skeuomorphic Layout</h1>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700">
</header>
<main class="flex-grow p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-32 object-cover mb-2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-32 object-cover mb-2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-32 object-cover mb-2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
</div>
</div>
</main>
<footer class="bg-white dark:bg-gray-800 shadow-md p-4 text-center rounded-lg">
<p class="text-gray-600 dark:text-gray-400">© 2023 My Company. All rights reserved.</p>
</footer>
</div>関連コンポーネント
レイアウトコンポーネントコンポーネント
ユーザーのアクションに応答する魅力的なアニメーションを通じてマイクロインタラクションを紹介するレスポンシブレイアウトコンポーネントで、ダークモードをサポートし、Tailwind CSSを利用しています。
サイバーパンク音楽プレーヤーのレイアウト
サイバーパンクをテーマにした音楽プレーヤーのレイアウトは、近未来的なネオンの美学、暗い背景、鮮やかなアクセントカラーを備え、応答性とダークモードのサポートのために設計されています。
ソーシャル メディア レイアウト コンポーネント
Tailwind CSSを使用した鮮やかな色とダークテーマのサポートを備えた、レスポンシブで複雑な3Dにインスパイアされたソーシャルメディアレイアウトコンポーネント。これには、ロゴとナビゲーションを含むヘッダー、投稿用の動的カードを含むメインコンテンツエリア、ユーザープロファイルとトレンドトピック用のサイドバーが含まれます。各要素は、奥行きと相互作用の感覚を与えるようにスタイル化されています。