Daisy UI Tailwind CSS Framework Layout

Summary

Created a simple layout with the Daisy UI Component library with sprinkling of Tailwind CSS.

This layout has:

• Navigation bar
• Hero section
• Feature section
• Subscribe to newsletter section
• Footer

HTML

Here are the CDN links.

<link
  href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css"
  rel="stylesheet"
  type="text/css"
/>

<script src="https://cdn.tailwindcss.com"></script>

I will add code below for the Hero element and Navbar element.

<!-- Navbar -->
<div class="navbar bg-base-200">
  <div class="navbar-start">
    <div class="dropdown">
      <label tabindex="0" class="btn btn-ghost lg:hidden">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h8m-8 6h16"
          />
        </svg>
      </label>
      <ul
        tabindex="0"
        class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
      >
        <li><a>About</a></li>
        <li><a>Products</a></li>
        <li><a>Contact</a></li>
      </ul>
    </div>
    <a class="btn btn-ghost normal-case text-xl">Logo Heading</a>
  </div>
  <div class="navbar-center hidden lg:flex">
    <ul class="menu menu-horizontal px-1">
      <li><a>About</a></li>
      <li><a>Products</a></li>
      <li><a>Contact</a></li>
    </ul>
  </div>
  <div class="navbar-end">
    <a class="btn btn-neutral">Do Something</a>
  </div>
</div>

<!-- Hero -->
<section class="container mx-auto mt-12 mb-4">
  <div class="hero min-h-[30rem] bg-base-200 rounded">
    <div class="hero-content text-center">
      <div class="max-w-4xl">
        <h1 class="text-6xl md:text-6xl lg:text-8xl font-bold">Hello There</h1>
        <p class="py-6 text-2xl md:text-3xl">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi
          aliquid quo repudiandae asperiores nemo omnis sit facere, qui veniam
          vel.
        </p>
        <button class="btn btn-primary me-2">Get Started!</button>
        <button class="btn btn-secondary">Do Something Else!</button>
      </div>
    </div>
  </div>
</section>
...

Tech and Tools

• CSS
• HTML
• Glitch
• Daisy UI
• Tailwind CSS

Demo

To preview the layout click the button below which will take you to Glitch.

Open Demo on Glitch