Position elements to the bottom of a div with tailwindcss - reactjs

Question

I've run into this problem, while I was writing the Code for my Portfolio.
I want to position my two buttons (as seen in the image below) to the bottom of the parenting div. I also want the alignment of the two buttons to be the same (in the middle of the parenting div). Just at the bottom.
https://i.stack.imgur.com/T6Mmg.png
Here is the code of just one div.
<div className='md:flex justify-center'>
<div className='m-2 p-4 bg-gray-100 border-2 border-gray-300 rounded-lg max-w-md shadow-xl mx-auto md:mx-4 hover:scale-105 duration-150 group'>
<div className='flex justify-between'>
<h1 className='font-bold text-xl'>The[Creators] - NFT Homepage</h1>
<img src={tcLogo} alt="thecreatorslogo" className='w-14 hover:rotate-12 duration-150' />
</div>
<p className='py-2'>My first Project was a Homepage, which contains infos about Jan Lampert's and my NFT Collections. You can find the Link down here 👇.</p>
<div className='flex bottom-4 items-end md:scale-0 group-hover:scale-100 duration-150'>
<button className='mx-auto rounded-xl bg-cyan-400 hover:shadow-lg hover:shadow-cyan-600 duration-300 py-4 px-6 font-bold text-xl'>Github</button>
<button className='mx-auto rounded-xl bg-pink-400 hover:shadow-lg hover:shadow-pink-600 duration-300 py-4 px-6 font-bold text-xl'><a href="https://thecreatorsnft.com" target='blank'>Website</a></button>
</div>
</div>

Answer 1

Here's a possible solution that can work here, keep in mind that they're many ways to solve this problem; in general, you have a lot of duplicate code, and I would try to find some ways to create components dynamically—for example, the projects' boxes and the links you have in your footer.
Solution:
Apply flex and flex-col on your projects' containers. Then apply justify-between to create this kind of spacing between your elements:
flex flex-col justify-between
Tailwind Play with the example
If you don't want to have the spacing between your header and your paragraph, you may create another container with the two of them.
To keep it simple, I'll give each container the flex utilities as well:
<div class="flex flex-col">
<-- Your header and paragraph elements --!>
</div>
You can style it however you want with the specific gaps you desire:
Tailwind Play with the example
Please note that I added the class md:w-1/3 on each container (on the second to give each project the same width. It might not be necessary for you; you can style it in many other ways.