Stick Elements at the Bottom of Cards with Equal Heights

Preview of the 3 content cards with equal heights and the buttons sticking at the bottom

In the following code snippet, we’ll show you how to create content cards with Tailwind CSS. These cards have two main features: they all have the same height, no matter what’s inside, and the buttons inside the cards are always positioned at the bottom, no matter how tall they are.

To ensure consistent card height despite different content, you have two choices: you can use the flexbox model or, as shown here, use a CSS grid layout. The key to keeping card height consistent is making sure the card element, styled with a white background (bg-white), stretches to 100% of its parent’s height (h-full).

With that setup, let’s move on to setting up the card’s content. The image is given a fixed height of 192px (h-48). Next, we have the element containing the text and buttons. Since we’ve used the flex and flex-col classes on its parent, we can ensure this element takes up all available space with flex-1.

Now, we can make the buttons stick at the bottom of the card in two ways:

By applying the mt-auto class to the element containing the buttons
Alternatively, we can use the flex-1 class to the element containing the text to make it expand and push the buttons downward

As you’ve seen, CSS offers different methods to achieve the same result. We’ve shown one approach in our example, but feel free to experiment and find the solution that works best for you!

Code

<div class="max-w-xs mx-auto grid gap-6 lg:grid-cols-3 items-start lg:max-w-none"> <!-- Card --> <div class="flex flex-col h-full bg-white border border-slate-200 shadow shadow-slate-950/5 rounded-2xl overflow-hidden"> <!-- Image --> <img class="object-cover h-48 w-full" src="./equal-height-01.jpg" width="304" height="192" alt="Course 01"> <!-- Card Content --> <div class="flex-1 flex flex-col p-6"> <!-- Card body --> <div class="flex-1"> <!-- Header --> <header class="mb-2"> <h2 class="text-xl font-extrabold leading-snug"> <a class="text-slate-900 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300" href="#0"> Unlocking the Secrets of Productivity </a> </h2> </header> <!-- Content --> <div class="text-sm text-slate-600 mb-8"> <p>Boost efficiency, accomplish more. Learn proven strategies.</p> </div> </div> <!-- Card footer --> <div class="flex justify-end space-x-2"> <a class="inline-flex justify-center whitespace-nowrap rounded-lg bg-transparent px-3 py-2 text-sm font-medium text-slate-500 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors" href="#0">Cancel</a> <a class="inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-50 px-3 py-2 text-sm font-medium text-indigo-500 hover:bg-indigo-100 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors" href="#0">Preview</a> <a class="inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors" href="#0">Buy Now</a> </div> </div> </div> <!-- Card --> <div class="flex flex-col h-full bg-white border border-slate-200 shadow shadow-slate-950/5 rounded-2xl overflow-hidden"> <!-- Image --> <img class="object-cover h-48 w-full" src="./equal-height-02.jpg" width="304" height="192" alt="Course 02"> <!-- Card Content --> <div class="flex-1 flex flex-col p-6"> <!-- Card body --> <div class="flex-1"> <!-- Header --> <header class="mb-2"> <h2 class="text-xl font-extrabold leading-snug"> <a class="text-slate-900 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300" href="#0"> The Ultimate JavaScript Course </a> </h2> </header> <!-- Content --> <div class="text-sm text-slate-600 mb-8"> <p>The JavaScript course for everyone! Master JavaScript with projects, challenges and theory.</p> </div> </div> <!-- Card footer --> <div class="flex justify-end space-x-2"> <a class="inline-flex justify-center whitespace-nowrap rounded-lg bg-transparent px-3 py-2 text-sm font-medium text-slate-500 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors" href="#0">Cancel</a> <a class="inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-50 px-3 py-2 text-sm font-medium text-indigo-500 hover:bg-indigo-100 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors" href="#0">Preview</a> <a class="inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors" href="#0">Buy Now</a> </div> </div> </div> <!-- Card --> <div class="flex flex-col h-full bg-white border border-slate-200 shadow shadow-slate-950/5 rounded-2xl overflow-hidden"> <!-- Image --> <img class="object-cover h-48 w-full" src="./equal-height-03.jpg" width="304" height="192" alt="Course 03"> <!-- Card Content --> <div class="flex-1 flex flex-col p-6"> <!-- Card body --> <div class="flex-1"> <!-- Header --> <header class="mb-2"> <h2 class="text-xl font-extrabold leading-snug"> <a class="text-slate-900 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300" href="#0"> Mastering Python Course </a> </h2> </header> <!-- Content --> <div class="text-sm text-slate-600 mb-8"> <p>Unlock the power of Python. From basics to advanced techniques, become a coding maestro with our comprehensive course.</p> </div> </div> <!-- Card footer --> <div class="flex justify-end space-x-2"> <a class="inline-flex justify-center whitespace-nowrap rounded-lg bg-transparent px-3 py-2 text-sm font-medium text-slate-500 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors" href="#0">Cancel</a> <a class="inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-50 px-3 py-2 text-sm font-medium text-indigo-500 hover:bg-indigo-100 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors" href="#0">Preview</a> <a class="inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors" href="#0">Buy Now</a> </div> </div> </div> </div>