Card with footer always at bottom

To ensure that the footer is always at the bottom of the card regardless of the content size, you can use Flexbox. By setting the card as a flex container and using flex-direction: column, you can push the footer to the bottom by making the content area take up the remaining space.

Here's how you can modify your HTML and CSS to achieve this:

1. Add flex and flex-col classes to the card container.
2. Add flex-grow to the content area to make it take up the remaining space.
3. Ensure the footer is not affected by the content's height by keeping it outside the flex-grow area.

Here's the updated code:

<article class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-500 rounded-lg h-full flex flex-col">
    <div class="relative">
        <img src="{{ asset($post->getImage() )}}" class="h-40 overflow-hidden w-full rounded-t-lg object-cover" />
        <div class="absolute bg-orange-500 block size-20 right-0 text-center text-lg text-white top-0 rounded-tr-lg rounded-bl-lg">
            <h3 class="text-3xl font-extrabold">{{ $post->published_at->format('d') }}</h3>
            <p class="text-sm">{{ $post->published_at->format('M') }}</p>
            <p class="text-xs">{{ $post->published_at->format('Y') }}</p>
        </div>
    </div>
    <div class="p-4 flex-grow">
        <div class="flex justify-between items-center mb-2 text-xs text-gray-500">
            <div class="flex">
                @foreach($post->categories as $category)
                    <span class="flex items-center bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
                        <x-heroicon-o-tag class="mr-2 size-3" />{{ $category->title }}
                    </span>
                @endforeach
            </div>
        </div>

        <div class="mb-4">
            <a wire:navigate href="#" class="font-bold text-2xl text-gray-900 dark:text-white hover:text-orange-500 dark:hover:text-orange-500 focus:outline-none focus:text-orange-500 dark:focus:text-orange-500 transition duration-150 ease-in-out">
                {{ $post->shortTitle() }}
            </a>
        </div>
        <div class="mb-4 flex flex-wrap font-normal text-gray-700 dark:text-gray-400">
            {!! $post->shortBody() !!}
        </div>
    </div>
    <footer class="flex justify-between items-center p-4">
        <div class="flex items-center space-x-4">
            <img class="h-7 w-7 rounded-full object-cover" src="{{ $post->user->profile_photo_url }}" alt="{{ $post->user->username }}" />
            <span class="text-sm font-medium dark:text-white">{{ $post->user->username }}</span>
        </div>
        <a href="#" class="flex items-center text-sm text-orange-500 hover:underline focus:outline-none focus:underline">
            Read More
            <x-heroicon-o-arrow-right-circle class="ml-2 size-5" />
        </a>
    </footer>
</article>

Explanation:

• flex flex-col on the <article> element makes it a flex container with a column direction.
• flex-grow on the content <div> makes it expand to fill the available space, pushing the footer to the bottom.
• The footer remains at the bottom because it is outside the flex-grow area.

This approach ensures that the footer will always be at the bottom of the card, regardless of the content size.