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

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

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

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row gap-8">
      <!-- Left Sidebar -->
      <div class="md:w-1/4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Profile</h2>
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">View Profile</p>
            </div>
          </div>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm">Feed</a></li>
            <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm">Messages</a></li>
            <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm">Settings</a></li>
          </ul>
        </div>
      </div>

      <!-- Main Content -->
      <div class="md:w-1/2">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Posts</h2>
          <div class="border-b border-gray-200 dark:border-gray-700 mb-6 pb-6">
            <div class="flex items-center mb-4">
              <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Jane Smith</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
              </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">This is an example post with some sample text. #retro #coding</p>
             <img class="w-full rounded-lg" src="https://picsum.photos/seed/retro1/600/400" alt="Post Image">
          </div>
           <div class="border-b border-gray-200 dark:border-gray-700 mb-6 pb-6">
            <div class="flex items-center mb-4">
              <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Peter Jones</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">5 hours ago</p>
              </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Another post example. Simple is often better. #monochromatic</p>
             <img class="w-full rounded-lg" src="https://picsum.photos/seed/retro2/600/400" alt="Post Image">
          </div>
        </div>
      </div>

      <!-- Right Sidebar -->
      <div class="md:w-1/4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Suggestions</h2>
          <ul class="space-y-4">
            <li class="flex items-center">
              <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Sara White</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Follow</p>
              </div>
            </li>
             <li class="flex items-center">
              <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">David Green</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Follow</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

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

マイクロインタラクションとパステルカラースキームを利用したレスポンシブダッシュボードレイアウトコンポーネントで、ダークモードをサポートするデータ視覚化およびコントロールパネルを表示するように設計されています。

プレビューを開く

                <div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col p-5">
  <header class="flex justify-between items-center mb-5">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    <button class="py-2 px-4 bg-blue-500 dark:bg-blue-700 text-white rounded-lg transition-transform transform hover:scale-105 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none">Logout</button>
  </header>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-pink-100 dark:bg-pink-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Statistics</h2>
      <p class="text-gray-600 dark:text-gray-400">Here are some stats about users.</p>
      <img src="https://picsum.photos/200/100" alt="User Stats" class="mt-2 rounded-md">
    </div>

    <div class="bg-green-100 dark:bg-green-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
      <p class="text-gray-600 dark:text-gray-400">View the sales data.</p>
      <img src="https://picsum.photos/200/100" alt="Sales Overview" class="mt-2 rounded-md">
    </div>

    <div class="bg-blue-100 dark:bg-blue-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Recent Activity</h2>
      <p class="text-gray-600 dark:text-gray-400">Check out the latest activity.</p>
      <img src="https://picsum.photos/200/100" alt="Recent Activity" class="mt-2 rounded-md">
    </div>

    <div class="bg-yellow-100 dark:bg-yellow-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Server Status</h2>
      <p class="text-gray-600 dark:text-gray-400">Monitor server health.</p>
      <img src="https://picsum.photos/200/100" alt="Server Status" class="mt-2 rounded-md">
    </div>

    <div class="bg-purple-100 dark:bg-purple-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
      <p class="text-gray-600 dark:text-gray-400">Your latest notifications.</p>
      <img src="https://picsum.photos/200/100" alt="Notifications" class="mt-2 rounded-md">
    </div>

    <div class="bg-red-100 dark:bg-red-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Profile</h2>
      <div class="flex items-center mt-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-3">
        <p class="text-gray-600 dark:text-gray-400">John Doe</p>
      </div>
    </div>
  </div>

  <footer class="mt-5 text-center text-gray-500 dark:text-gray-400">
    <p>&copy; 2023 Dashboard. All rights reserved.</p>
  </footer>
</div>

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

スキューモーフィックスタイルでデザインされたレスポンシブ Web コンポーネントで、ビジネス/企業の Web サイト向けの単色の配色が特徴です。リッチなインターフェースのためのインタラクティブな要素を含み、ダークモードをサポートします。

プレビューを開く

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
  <h1 class="text-3xl font-bold mb-4">Corporate Dashboard</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Company Overview</h2>
      <img src="https://picsum.photos/200/100" alt="Company Overview" class="rounded-lg mb-2" />
      <p class="mb-2">Overview of company performance and metrics. Check out the latest updates and key statistics.</p>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Details</button>
    </div>
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Team Members</h2>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Member 1" class="w-12 h-12 rounded-full mr-3" />
        <p>John Doe - CEO</p>
      </div>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Member 2" class="w-12 h-12 rounded-full mr-3" />
        <p>Jane Smith - CTO</p>
      </div>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Team</button>
    </div>
  </div>
  <div class="mt-4 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-xl font-semibold">Latest Reports</h2>
    <ul class="list-disc pl-5">
      <li><a href="#" class="text-blue-400 hover:underline">Q1 2023 Financial Report</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Market Trends Analysis</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Competitor Comparison</a></li>
    </ul>
  </div>
</div>

ポートフォリオレイアウト

補色、ダークモードのサポート、最小限の要素によるマイクロインタラクションに焦点を当てたポートフォリオ向けのシンプルなレスポンシブレイアウトコンポーネント。

プレビューを開く

                <div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black">

  <!-- Header with microinteraction -->
  <header class="w-full px-4 py-3 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg flex justify-between items-center border-b border-white border-opacity-20 transition duration-300 ease-in-out transform hover:scale-105">
    <h1 class="text-xl font-bold text-white">My Portfolio</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Home</a></li>
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Projects</a></li>
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main content area -->
  <main class="flex-grow container mx-auto px-4 py-8 text-white">
    <section class="text-center mb-12">
      <h2 class="text-4xl font-semibold mb-4">Welcome to my portfolio</h2>
      <p class="text-lg">Showcasing my work with a touch of interaction.</p>
    </section>

    <!-- Example Project Card with microinteraction -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project One</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project one.</p>
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project One" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
      <!-- Repeat for more project cards -->
        <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project Two</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project two.</p>
         <img src="https://picsum.photos/seed/project2/400/300" alt="Project Two" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
        <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project Three</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project three.</p>
         <img src="https://picsum.photos/seed/project3/400/300" alt="Project Three" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
    </div>

  </main>

  <!-- Footer -->
  <footer class="w-full px-4 py-6 text-center text-white text-opacity-80">
    <p>&copy; 2023 My Portfolio</p>
  </footer>

</div>

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

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

プレビューを開く

                <div class="min-h-screen bg-gray-900 text-gray-200 p-4">
  <div class="container mx-auto">
    <header class="flex justify-between items-center py-6">
      <h1 class="text-2xl font-bold text-gray-100">My Portfolio</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="hover:text-gray-100">Home</a></li>
          <li><a href="#" class="hover:text-gray-100">Projects</a></li>
          <li><a href="#" class="hover:text-gray-100">Contact</a></li>
        </ul>
      </nav>
    </header>
    
    <main class="grid grid-cols-1 md:grid-cols-2 gap-8 py-8">
      <section>
        <h2 class="text-xl font-semibold mb-4">About Me</h2>
        <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
      
      <section>
        <h2 class="text-xl font-semibold mb-4">Recent Projects</h2>
        <div class="space-y-4">
          <div class="bg-gray-800 p-4 rounded-md">
            <h3 class="font-semibold">Project One</h3>
            <p class="text-gray-500 text-sm">A brief description of project one.</p>
          </div>
          <div class="bg-gray-800 p-4 rounded-md">
            <h3 class="font-semibold">Project Two</h3>
            <p class="text-gray-500 text-sm">A brief description of project two.</p>
          </div>
        </div>
      </section>
    </main>
    
    <footer class="text-center py-6 text-gray-500">
      © 2023 My Portfolio
    </footer>
  </div>
</div>

Glassmorphism ダッシュボードのレイアウト

半透明のすりガラスのような要素を備えたダッシュボードのシンプルなglassmorphismレイアウトで、パステルカラーの配色とダークモードのサポートが特徴です。

プレビューを開く

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 m-4 w-full max-w-3xl">
        <h1 class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</h1>
        <div class="mt-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                    <h2 class="font-medium text-gray-700 dark:text-gray-200">User Statistics</h2>
                    <img src="https://picsum.photos/300/200?random=1" alt="User Statistics Image" class="w-full rounded-lg mt-2" />
                </div>
                <div class="bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                    <h2 class="font-medium text-gray-700 dark:text-gray-200">Recent Activities</h2>
                    <img src="https://picsum.photos/300/200?random=2" alt="Recent Activities Image" class="w-full rounded-lg mt-2" />
                </div>
            </div>
            <div class="mt-4 bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                <h2 class="font-medium text-gray-700 dark:text-gray-200">Control Panel</h2>
                <img src="https://picsum.photos/300/200?random=3" alt="Control Panel Image" class="w-full rounded-lg mt-2" />
            </div>
        </div>
        <div class="flex justify-between items-center mt-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <span class="ml-2 text-gray-700 dark:text-gray-200">John Doe</span>
            </div>
            <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Logout</button>
        </div>
    </div>
</div>

ニューモーフィズムポートフォリオレイアウト

ポートフォリオ用のシンプルで応答性の高い Neumorphism レイアウトで、ダークモードをサポートします。

プレビューを開く

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8">
  <div class="container mx-auto">
    <!-- Header -->
    <header class="p-6 mb-8 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h1 class="text-3xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </header>

    <!-- Main Content -->
    <main class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Project Card -->
      <div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 1</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 1.</p>
        <img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
      </div>

      <!-- Project Card -->
      <div class="bg-gray-300 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Project Title 2</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project 2.</p>
         <img src="https://picsum.photos/400/250" alt="Project Image" class="rounded-lg shadow-md mb-4">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
      </div>
    </main>

    <!-- Footer -->
    <footer class="mt-8 p-6 bg-gray-300 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-center text-gray-700 dark:text-gray-300">
      <p>&copy; 2023 My Portfolio</p>
    </footer>
  </div>
</div>

<style>
/* Custom Neumorphism Shadows */
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
}
</style>

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

ブログやコンテンツの消費用に設計された複雑なレイアウトコンポーネントで、マイクロインタラクションと補色スキームが特徴です。さまざまなインタラクティブ要素が含まれており、ダークモードをサポートしています。

プレビューを開く

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen">
    <header class="bg-blue-500 dark:bg-blue-700 p-4 shadow-md transition-colors duration-300">
        <h1 class="text-white text-2xl font-bold">My Blog</h1>
        <nav class="mt-2">
            <ul class="flex space-x-4">
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Home</a></li>
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">About</a></li>
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main class="py-10 px-4 sm:px-8 lg:px-16">
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">This is a brief description of the blog post. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200?2" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Another Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">This is another brief description. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200?3" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Yet Another Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of yet another blog post. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
        </section>
    </main>

    <footer class="bg-blue-500 dark:bg-blue-700 p-4 text-center text-white">
        <p>&copy; 2023 My Blog</p>
    </footer>
</div>

Glassmorphismビジネスレイアウト

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

プレビューを開く

                <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>

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

マテリアルデザインの原則に基づいて設計されたレスポンシブブログレイアウトコンポーネントで、単色の配色を使用し、ダークモードをサポートします。

プレビューを開く

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-6">
    <div class="container mx-auto">
        <header class="text-center mb-10">
            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
            <p class="text-gray-600 dark:text-gray-400">Insights, stories, and thoughts</p>
        </header>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200?random=1" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. In hac habitasse platea dictumst...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200?random=2" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Curabitur nec libero vel arcu elementum mattis...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
        </div>
        <footer class="mt-10 text-center">
            <p class="text-gray-600 dark:text-gray-400">© 2023 My Blog. All rights reserved.</p>
        </footer>
    </div>
</div>

カテゴリ

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