ミニマリストメディアコンポーネント
ビジネス/企業のWebサイト向けのシンプルでクリーンでレスポンシブなメディアコンポーネントで、キャンディー/スウィートカラーとダークモードのサポートを備えています。
HTMLコード
<div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-md mx-auto bg-pink-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-2xl lg:max-w-4xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/400/300?random=1" alt="Modern business workspace">
</div>
<div class="p-4 md:p-6">
<div class="uppercase tracking-wide text-sm text-pink-500 dark:text-pink-400 font-semibold">Company News</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline transition-colors duration-300">Innovative Solutions for Future Growth</a>
<p class="mt-2 text-gray-700 dark:text-gray-300 text-sm md:text-base">Our latest report highlights key strategies and technological advancements that are set to redefine industry standards. Discover how we're shaping tomorrow's landscape.</p>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar">
</div>
<div class="ml-3 text-sm text-gray-600 dark:text-gray-400">
<p class="font-medium">Jane Doe</p>
<p>CEO, Tech Innovations</p>
</div>
</div>
</div>
</div>
</div>
</div>
関連コンポーネント
Memphis_Media_Component_Educational
教育プラットフォーム向けのレスポンシブメディアコンポーネントで、大胆な色、幾何学的な形状、ネオン/エレクトリックの配色を使用してメンフィススタイルの美学で設計されています。ダークモードをサポートします。
メディアコンポーネントコンポーネント
複雑で応答性が高く、ダークモード互換のソーシャルメディアメディアコンポーネントで、鮮やかな色を使用したGlassmorphismスタイルを採用しています。
Brutalism_Job_Media_Card
求人掲示板用の複雑なブルータリズムスタイルのメディアコンポーネントで、ハイコントラスト、大胆なタイポグラフィ、紫/紫の配色が特徴です。ダークモードのサポートによるレスポンシブ。