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>

関連コンポーネント

RetroBlogレイアウト

レトロ/ビンテージの美学、ダークモードのサポート、およびTailwind CSSで構築された補色の配色を備えた、シンプルでレスポンシブなブログレイアウト。

開ける

サイバーパンク暗号ダッシュボードのレイアウト

暗号通貨およびブロックチェーンアプリケーション向けのレスポンシブなサイバーパンクをテーマにしたダッシュボードレイアウトで、ネオンのアクセント、暗い背景、落ち着いた色が特徴です。サイドバーナビゲーション、メインコンテンツエリア、トップバーが含まれています。

開ける

Eコマースレイアウトコンポーネント

ダークテーマをサポートするレスポンシブなeコマースレイアウトコンポーネントで、マテリアルデザインの原則に従ってTailwind CSSで構築されています。これには、ナビゲーションバー、製品リストを含むメインコンテンツエリア、フッターが含まれています。配色はパステルカラー。

開ける