How to set an item at the bottom of a card components in TailwindCss

Abdusselam Kelani 0
Viewed 40

I want the footer tag in this card to be always at the bottom of the card Regardless the length of the paragraph and the title above it. I'm using tailwindCss and Laravel.

here is the image of the cards

here is the component of the card

@props(['post'])
<article
    {{ $attributes -> merge(['class' => 'transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl']) }}>
<div class="py-6 px-5">
    <div>
        {{-- TODO --}}
        <img src="./images/illustration-3.png" alt="Blog Post illustration" class="rounded-xl">
    </div>

    <div class="mt-8 flex flex-col justify-between">
        <header>
            <div class="space-x-2">
                <x-category-button :category="$post->category" />
            </div>

            <div class="mt-4">
                <h1 class="text-3xl">
                    <a href="/posts/{{ $post->slug }}">
                        {{ $post->title }}
                    </a>
                </h1>

                <span class="mt-2 block text-gray-400 text-xs">
                    Published <time>{{$post->created_at->diffForHumans()}}</time>
                </span>
            </div>
        </header>

        <div class="text-sm mt-4 space-y-4">
                {!! $post->excerpt !!}
        </div>

        <footer class="flex justify-between items-center">
            <div class="flex items-center text-sm">
                <img src="/images/lary-avatar.svg" alt="Lary avatar">
                <div class="ml-3 w-36">
                    <h5 class="font-bold">{{ $post->author->name }}</h5>
                </div>
            </div>

            <div>
                <a href="#"
                   class="transition-colors duration-300 text-xs font-semibold bg-gray-200 hover:bg-gray-300 rounded-full py-2 px-8"
                >Read More</a>
            </div>
        </footer>
    </div>
</div>
tailwind-css laravel css html
2 Answers

You need to use a flex container and make all of the boxes use grow so they fill up the height. The child boxes also need to use flex and have the middle content fill the remaining space, so it pushes down the footers of each.

kjoedion0

I solved this by using (h-full flex flex-col) classes to the container div of all card elements and adding these classes (flex flex-col justify-between flex-1) to the container div of the title, excerpt, and author name. so in this way, the container div of the second part of the card takes the remaining height of the card.

my new code:

@props(['post'])
<article
  {{ $attributes -> merge(['class' => ' transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl']) }}>

<div class="py-6 px-5 h-full flex flex-col">
    <div>
        {{-- TODO --}}
        <img src="./images/illustration-3.png" alt="Blog Post illustration" class="rounded-xl">
    </div>

    <div class="mt-6 flex flex-col justify-between flex-1">
        <header>
            <div class="space-x-2">
                <x-category-button :category="$post->category" />
            </div>

            <div class="mt-4">
                <h1 class="text-3xl clamp one-line">
                    <a href="/posts/{{ $post->slug }}">
                        {{ $post->title }}
                    </a>
                </h1>

                <span class="mt-2 block text-gray-400 text-xs">
                    Published <time>{{ $post->created_at->diffForHumans() }}</time>
                </span>
            </div>
        </header>

        <div class="text-sm mt-4 space-y-4">
            {!! $post->excerpt !!}
        </div>

        <footer class="flex justify-between items-center mt-8">
            <div class="flex items-center text-sm">
                <img src="/images/lary-avatar.svg" alt="Lary avatar">
                <div class="ml-3">
                    <h5 class="font-bold w-32">
                        <a href="/?author={{ $post->author->username }}">{{ $post->author->name }}</a>
                    </h5>
                </div>
            </div>

            <div>
                <a href="/posts/{{ $post->slug }}"
                   class="transition-colors duration-300 text-xs font-semibold bg-gray-200 hover:bg-gray-300 rounded-full py-2 px-8"
                >Read More</a>
            </div>
        </footer>
    </div>    
</div>
Abdusselam Kelani0
Related