コンテンツ表示コンポーネント
補色を使用したブルータリズムスタイルでデザインされた、シンプルでレスポンシブなコンテンツ表示コンポーネントです。ビジネス/企業のWebサイトに適しており、ダークモードをサポートしています。
HTMLコード
<div class="bg-white dark:bg-gray-800 text-black dark:text-white border border-black dark:border-white p-6 max-w-lg mx-auto">
<h1 class="text-3xl font-bold mb-4">Company Title</h1>
<img src="https://picsum.photos/500/300" alt="Content Image" class="w-full rounded-lg mb-4">
<p class="text-lg mb-6">This is a brief description of the company. Emphasizing clear, bold statements to convey professionalism and competence in a raw form.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="">
<h2 class="text-xl font-semibold">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">CEO</p>
</div>
</div>
</div>関連コンポーネント
教育向けマテリアルデザインコンテンツカード
マテリアルデザインの原則、企業の青い配色、およびダークモードのサポートで設計されたシンプルでレスポンシブなコンテンツカードで、教育プラットフォームに適しています。
コンテンツ表示コンポーネント
マイクロインタラクション、レスポンシブデザイン、Tailwind CSS を使用したダークテーマのサポートを備えたコンテンツ表示コンポーネント。微妙なホバー効果とインタラクティブな要素へのフォーカスアニメーションを備えています。