CCHub Logo CCHub Tailwind Collection
コンポーネント メディアコンポーネント ブルータリズムパステルメディアコンポーネント

ブルータリズムパステルメディアコンポーネント

パステルカラーのシンプルなブルータリズムメディアコンポーネントで、ブログ用にデザインされています。ダークモードのサポートによるレスポンシブ。

プレビュー

HTMLコード 

<div class="max-w-sm mx-auto bg-white border border-black shadow-brutalism overflow-hidden mb-4 dark:bg-gray-800 dark:border-gray-600">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/400/200" alt="Placeholder Image">
  <div class="p-4">
    <div class="font-bold text-xl mb-2 text-black dark:text-white">Media Component Title</div>
    <p class="text-gray-700 text-base dark:text-gray-300">
      This is a simple brutalist media component using pastel colors. It is responsive and supports dark mode.
    </p>
    <div class="mt-4 flex items-center">
      <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Author">
      <div class="text-sm">
        <p class="text-gray-900 leading-none dark:text-white">Author Name</p>
        <p class="text-gray-600 dark:text-gray-400">Date</p>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

メディアコンポーネントコンポーネント

ブルータリズムスタイルで設計されたメディアコンポーネントで、Tailwind CSSを使用したハイコントラスト、レスポンシブエフェクト、ダークテーマのサポートを備えた大胆なレイアウトを示しています。

開ける

バウハウスの類似メディアコンポーネント

バウハウスにインスパイアされたデザインのレスポンシブメディアコンポーネントで、類似の配色を使用しており、政府/公共サービスのWebサイトに適しています。幾何学的な形状、主要な類似色、およびダークモードのサポートを備えています。

開ける

Industrial_Marketplace_Media_Component

マーケットプレイス向けのシンプルなインダストリアルスタイルのメディアコンポーネントで、画像、タイトル、価格を特徴とし、原材料と実用的な美学に焦点を当てています。秋の色を使用し、ダークモードをサポートします。

開ける