CCHub Logo CCHub Tailwind Collection
コンポーネント レイアウトコンポーネント Glassmorphismビジネスレイアウト

Glassmorphismビジネスレイアウト

アース トーンを特徴とする、Tailwind CSS を使用したダーク モードをサポートする、シンプルで応答性の高い glassmorphism レイアウト コンポーネント。

プレビュー

HTMLコード 

<div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 p-8 rounded-xl shadow-lg w-4/5 md:w-2/3 lg:w-1/2 backdrop-filter backdrop-blur-lg">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Business Layout Component</h1>
    <p class="text-gray-600 dark:text-gray-300">This is a simple layout component showcasing glassmorphism with earth tones, suitable for business websites. It is responsive and supports dark mode.</p>
    <div class="mt-6 flex flex-col md:flex-row justify-between items-center">
      <div class="text-gray-700 dark:text-gray-200 mb-4 md:mb-0">
        <p>Contact Information:</p>
        <p>Email: [email protected]</p>
        <p>Phone: (123) 456-7890</p>
      </div>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
    </div>
  </div>
</div>

関連コンポーネント

ダークモードポートフォリオレイアウト

ポートフォリオ用のダークモードレスポンシブレイアウトコンポーネントで、Tailwind CSS を使用したモノクロの配色が特徴です。コンテンツのプレースホルダーが含まれており、JavaScript を使用しない場合の適度な複雑さに対応するように設計されています。

開ける

レトロなソーシャルメディアレイアウト

ソーシャルメディア用のシンプルな単色のレトロなテーマのレイアウトで、ダークモードがサポートされています。

開ける

3D レイアウトコンポーネント

グレースケールの配色を特徴とするレスポンシブ3Dデザインのソーシャルメディアレイアウトコンポーネント。ソーシャルネットワーキングインターフェースに適しています。

開ける