Wireframe Layouts

Latest Tailwind Components

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

Application

Blog

Ecommerce

General

Marketing

Social

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>

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>