Search Components

Layout Components

Components that structure the overall page layout

3D Layout Component

A responsive 3D Design social media layout component featuring a grayscale color scheme. Suitable for social networking interfaces.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 transform hover:scale-105 transition-transform duration-300">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border-2 border-gray-300 dark:border-gray-700">
        <h2 class="text-gray-800 dark:text-white text-lg font-semibold ml-4">User Name</h2>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/400/200" alt="Post Image" class="rounded-lg shadow-md">  
    </div>
    <div class="text-gray-600 dark:text-gray-300">
        <p class="mb-2">This is a simple social media post showcasing a 3D design layout. Engage with your network in style!</p>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Like</button>
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Comment</button>
    </div>
</div>

RetroBlog Layout

A simple, responsive blog layout with a retro/vintage aesthetic, dark mode support, and a complementary color scheme, built with Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-200 font-sans text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  <header class="bg-blue-600 py-4 shadow-md dark:bg-blue-800">
    <div class="container mx-auto px-4">
      <h1 class="text-center text-3xl font-bold text-white">RetroBlog</h1>
    </div>
  </header>

  <main class="container mx-auto p-4">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
      <!-- Main Content Area -->
      <section class="md:col-span-2">
        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Blog Post Title</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 27, 2023</p>
          <img src="https://picsum.photos/seed/retro1/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </article>

        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Another Blog Post</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 26, 2023</p>
          <img src="https://picsum.photos/seed/retro2/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </article>
      </section>

      <!-- Sidebar -->
      <aside>
        <div class="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">About</h3>
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="mb-4 w-16 h-16 rounded-full mx-auto">
          <p class="text-gray-700 text-center dark:text-gray-300">A passionate writer sharing thoughts and ideas on various topics.</p>
        </div>

        <div class="mt-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">Categories</h3>
          <ul>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Technology</a></li>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Lifestyle</a></li>
            <li><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Travel</a></li>
          </ul>
        </div>
      </aside>
    </div>
  </main>

  <footer class="bg-gray-700 py-4 text-center text-white dark:bg-gray-900">
    <p>&copy; 2023 RetroBlog. All rights reserved.</p>
  </footer>
</div>

Minimalist Blog Layout Component

Minimalist Blog Layout Component with Monochromatic Color Scheme for content consumption, responsive and with dark theme support.

Open Preview

                <div class="container mx-auto px-4 py-8 dark:bg-gray-900 dark:text-gray-200">
  <header class="text-center mb-12">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-white">Blog Title</h1>
    <p class="text-gray-600 dark:text-gray-400">A space for thoughts and stories</p>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="md:col-span-2">
      <article class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <img src="https://picsum.photos/seed/article1/800/400" alt="Article Image" class="rounded-md mb-4">
        <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white">First Article Title</h2>
        <p class="text-gray-700 leading-relaxed dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button class="mt-4 text-blue-500 hover:underline dark:text-blue-400">Read More</button>
      </article>

      <article class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <img src="https://picsum.photos/seed/article2/800/400" alt="Article Image" class="rounded-md mb-4">
        <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white">Second Article Title</h2>
        <p class="text-gray-700 leading-relaxed dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <button class="mt-4 text-blue-500 hover:underline dark:text-blue-400">Read More</button>
      </article>
    </div>

    <div>
      <section class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 dark:text-white">Recent Posts</h3>
        <ul>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 1</a></li>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 2</a></li>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 3</a></li>
        </ul>
      </section>

      <section class="bg-white p-6 rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 dark:text-white">About Me</h3>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-12 h-12 mr-4">
          <p class="text-gray-700 dark:text-gray-300">A short bio about the author of this blog.</p>
        </div>
      </section>
    </div>
  </main>

  <footer class="text-center mt-12 text-gray-600 dark:text-gray-400">
    <p>&copy; 2023 Blog Title. All rights reserved.</p>
  </footer>
</div>

3D Layout Component

A simple, responsive, and engaging 3D design layout for business/corporate websites using vibrant colors, with dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden md:flex md:flex-row">
    <div class="md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our Company</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">We provide innovative solutions to enhance your business.</p>
        <a href="#" class="bg-indigo-600 text-white rounded-lg px-4 py-2 hover:bg-indigo-700 transition duration-300 shadow-md transform hover:scale-105">Learn More</a>
    </div>
    <div class="md:w-1/2">
        <img src="https://picsum.photos/500/300" alt="Business Image" class="rounded-lg shadow-md w-full h-full object-cover" />
    </div>
</div>

<div class="flex justify-center mt-6">
    <div class="text-center bg-gray-100 dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Our Team</h3>
        <div class="flex items-center justify-center space-x-4 mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar 2" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar 3" class="rounded-full w-16 h-16 shadow-lg" />
        </div>
        <p class="text-gray-600 dark:text-gray-400 mt-2">Meet our dedicated team of professionals.</p>
    </div>
</div>

Retro Social Media Layout

A simple, monochromatic retro-themed layout for social media, with support for dark mode.

Open Preview

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

Layout Components

A responsive dashboard layout component that utilizes microinteractions and a pastel color scheme, designed for displaying data visualization and control panels with dark mode support.

Open Preview

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

A responsive web component designed with a skeuomorphic style, featuring a monochromatic color scheme for business/corporate websites. Includes interactive elements for a rich interface and supports dark mode.

Open Preview

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

Portfolio Layout

A simple responsive layout component for a portfolio focusing on microinteractions with complementary colors, dark mode support, and minimal elements.

Open Preview

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

Dark Mode Portfolio Layout

A dark mode responsive layout component for portfolios, featuring a monochromatic color scheme using Tailwind CSS. Includes placeholders for content and is designed for moderate complexity without JavaScript.

Open Preview

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

A simple glassmorphism layout for a dashboard with translucent frosted glass-like elements, featuring a pastel color scheme and dark mode support.

Open Preview

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