CCHub Logo CCHub Tailwind Collection
コンポーネント メディアコンポーネント ミニマリストメディアコンポーネント

ミニマリストメディアコンポーネント

ビジネス/企業の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>

関連コンポーネント

Cyberpunk_Dating_Media_Component

サイバーパンクの美学を備えたデート/ソーシャルプラットフォーム向けのレスポンシブメディアコンポーネントで、明るいキャンディーカラー、暗い背景、インタラクティブな要素が特徴です。ダークモードをサポートします。

開ける

Skeuomorphic_Grayscale_Media_Component

ビジネス/企業の Web サイト向けにスキューモーフィックなグレースケールスタイルで設計された、複雑でレスポンシブなメディアコンポーネントで、複数のインタラクティブ要素とダークモードのサポートを特長としています。

開ける

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

Tailwind CSS で構築された glassmorphism デザイン (すりガラス効果) のレスポンシブ メディア カード コンポーネント。ホバー表示の再生アイコン、テキストコンテンツ、アバター付きの作成者セクション(randomuser.me から)、アクションボタンを備えた画像プレースホルダー(picsum.photosから)を備えています。このコンポーネントは、Tailwind CSS の「dark:」バリアントを使用したダークモードをサポートし、さまざまな画面サイズで応答します。JavaScriptは必要ありません。最適な視覚効果を得るには、このコンポーネントを対照的な背景に配置します。ダークモード機能は、適切なTailwind CSS構成(例:tailwind.config.jsの「darkMode: "class"」)を前提としています。

開ける