Tailwind CSS text over image problems

Question

I'm trying to code as below https://play.tailwindcss.com/5x8mBABcsW

How I can place the text over the circle image? I need the text centered and rounded on the bottom of the image.

I also want to be able to increase size of the image and everything should stay in proportion.

Answer 1

Something like this

<div class="relative w-40 h-40 rounded-full overflow-hidden">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="object-cover w-full h-full" />
  <div class="absolute w-full py-2.5 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4">this is a text</div>
</div>

Height of bottom element is set by paddings (but you can change it with height), image size handled by parent's w-40 h-40 - you may change them.