Masonry Sections
Quickly get a project started with any of our examples ranging from using parts of the UI to custom components and layouts using Tailwind CSS.
Cards on Images
<!-- Masonry Cards -->
<div class="max-w-6xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid sm:grid-cols-12 gap-6">
<div class="sm:self-end col-span-12 sm:col-span-7 md:col-span-8 lg:col-span-5 lg:col-start-3">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3481&q=80" alt="Image Description">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
<div class="text-sm font-bold text-gray-800 rounded-lg bg-white p-4 md:text-xl dark:bg-gray-800 dark:text-gray-200">
Workplace personalities
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="sm:self-end col-span-12 sm:col-span-5 md:col-span-4 lg:col-span-3">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="Image Description">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
<div class="text-sm font-bold text-gray-800 rounded-lg bg-white p-4 md:text-xl dark:bg-gray-800 dark:text-gray-200">
Women in engineering
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-span-12 md:col-span-4">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="https://images.unsplash.com/photo-1606836576983-8b458e75221d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Image Description">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
<div class="text-sm font-bold text-gray-800 rounded-lg bg-white p-4 md:text-xl dark:bg-gray-800 dark:text-gray-200">
Pride 2021
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="https://images.unsplash.com/photo-1598929438701-ef29ab0bb61a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" alt="Image Description">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
<div class="text-sm font-bold text-gray-800 rounded-lg bg-white p-4 md:text-xl dark:bg-gray-800 dark:text-gray-200">
Data at Preline
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<!-- Card -->
<a class="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
<div class="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover" src="https://images.unsplash.com/photo-1467043153537-a4fba2cd39ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1019&q=80" alt="Image Description">
</div>
<div class="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
<div class="text-sm font-bold text-gray-800 rounded-lg bg-white p-4 md:text-xl dark:bg-gray-800 dark:text-gray-200">
Empowered management
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End Masonry Cards -->
Download Preline UI
Our code is available for you to download, inspect, and modify: