Wireframe Layouts

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Application

Blog

Ecommerce

General

Marketing

Social

Card with action

Card title!

If a dog chews shoes whose shoes does he choose?

<div class="text-neutral-content w-96 rounded-lg bg-sky-400/85 p-4 text-white shadow-xl">

  <div>

    <h2 class="font-inter py-2 text-xl font-semibold">Card title!</h2>

    <p>If a dog chews shoes whose shoes does he choose?</p>

    <div class="my-1 flex justify-end">

      <button class="my-1 rounded-xl bg-sky-500 px-4 py-2 text-white outline-none hover:bg-sky-600">Buy Now</button>

    </div>

  </div>

</div>

Gallery Image

<div class="grid aspect-[16/9] grid-cols-2 gap-0 rounded-xl">

  <div>

    <img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />

  </div>

  <div>

    <img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />

  </div>

</div>

Featured image

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">

    <div class="grid gap-4">

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image.jpg" alt="">

        </div>

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-1.jpg" alt="">

        </div>

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-2.jpg" alt="">

        </div>

    </div>

    <div class="grid gap-4">

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-3.jpg" alt="">

        </div>

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-4.jpg" alt="">

        </div>

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-5.jpg" alt="">

        </div>

    </div>

    <div class="grid gap-4">

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-6.jpg" alt="">

        </div>

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-7.jpg" alt="">

        </div>

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-8.jpg" alt="">

        </div>

    </div>

    <div class="grid gap-4">

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-9.jpg" alt="">

        </div>

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-10.jpg" alt="">

        </div>

        <div>

            <img class="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-11.jpg" alt="">

        </div>

    </div>

</div>

Form shadow inputs

<form class="mx-auto max-w-sm">

  <div class="mb-5">

    <label for="email" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Your email</label>

    <input type="email" id="email" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-xs focus:border-blue-500 focus:ring-blue-500" placeholder="[email protected]" required />

  </div>

  <div class="mb-5">

    <label for="password" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Your password</label>

    <input type="password" id="password" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-xs focus:border-blue-500 focus:ring-blue-500" required />

  </div>

  <div class="mb-5">

    <label for="repeat-password" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Repeat password</label>

    <input type="password" id="repeat-password" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-xs focus:border-blue-500 focus:ring-blue-500" required />

  </div>

  <div class="mb-5 flex items-start">

    <div class="flex h-5 items-center">

      <input id="terms" type="checkbox" value="" class="h-4 w-4 rounded-sm border border-gray-300 bg-gray-50 focus:ring-3 focus:ring-blue-300" required />

    </div>

    <label for="terms" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">I agree with the <a href="#" class="text-blue-600 hover:underline">terms and conditions</a></label>

  </div>

  <button type="submit" class="rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-none">Register new account</button>

</form>