CCHub Logo CCHub Tailwind Collection
コンポーネント インタラクティブコンポーネント インタラクティブコンポーネントコンポーネント

インタラクティブコンポーネントコンポーネント

Glassmorphism デザイン、パステル調の配色、ブログコンテンツ用のシンプルなレイアウトを備えたインタラクティブなコンポーネントです。応答性が高く、ダークモードのサポートが含まれています。

プレビュー

HTMLコード 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Blog Post Title</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>This is a simple interactive component designed for blog content, featuring a Glassmorphism style with pastel colors.</p>
            <p>It is responsive and supports dark mode.</p>
          </div>
          <div class="pt-4 text-base leading-6 font-bold sm:text-lg sm:leading-7">
            <a href="#" class="text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-500">Read More &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

関連コンポーネント

インタラクティブ・コンポーネント・コンポーネント 25

マテリアル デザイン スタイルのインタラクティブ コンポーネントで、グリッド レイアウト、レスポンシブ デザイン、ダーク テーマのサポートが特徴です。

開ける

インタラクティブコンポーネントコンポーネント

ブルータリズムにインスパイアされたブログ用のインタラクティブコンポーネントで、ハイコントラストのアースカラー、レスポンシブデザイン、ダークモードのサポートが特徴です。

開ける

インタラクティブポートフォリオコンポーネント

マイクロインタラクションとパステルカラースキームを備えたレスポンシブポートフォリオコンポーネントで、Tailwind CSSによるダークモードをサポートします。

開ける