I am working in react js with tailwind. I have a card with a bg-color. I assigns it a bg color right and I dont want to give it a specific height or width and wonna to handle it through margin and padding. The first component in my card is a small logo which is towards the right end with a right and top of 24px. After that I have an image in the center and on the image I want to overlay the text. the py of image is 45px and px is 129px. I want to handle it through this margin and padding instead of specific height and width below is my code with a specific and width and height but dont wonna to add a specific width and height .
<div className="relative max-w-87.5 sm:max-w-96.5 bg-[#413AE9] rounded-3xl overflow-hidden h-[217.13px]"><div className="absolute top-6 right-6 z-30"><img src="/images/egift-logo1.svg" alt="" /></div><div className="absolute inset-0 flex items-center justify-center z-10 opacity-20 "><div className="w-28 h-[111.83px] bg-[url('/images/egift-logo2.svg')] bg-no-repeat bg-center bg-cover" /></div><div className="absolute z-20 bottom-12.5 pl-6 flex flex-col gap-1"><p className="sans-medium text-[22px] leading-7.5 text-white"> 1-800-PetSupplies</p></div><div className='flex absolute bottom-6 justify-between left-6 right-6 mt-0.5'><p className='sans-regular text-[16px] text-[#DADADA]'>Value €25.00 - €25.00</p><div><button className='bg-[#FFE4E4] px-3 py-1 rounded-[117px] flex items-center justify-center hanken-regular'> 1 items</button></div></div></div>