Tailwind JSx Image wont center on my cards - css

Question

I have made a set of three cards that will display information at the top of the three cards is an image, I am using JSX and Tailwind but can not seem to get the image to center, it sits off to the left.
How do I make it so the image is centered properly what am I missing? staring at it is not helping !
This is my code TIA !
<section>
<div>
<h3 className='text-3xl py-10 text-center'>About Me </h3>
<p className='text-center text-md py-2 leading-8 text-gray-800'>
Blah blah blah <span className="text-teal-500 text-md">Tech</span> blah
</p>
</div>
<div className='lg:flex gap-10 '>
<div className='text-center shadow-lg p-10 rounded-xl my-10'>
<Image src={design} width={100} height={100} />
<h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
<p className='py-2'>
Creating elegant designs suited for your needs
</p>
<h4 className='py-4 text-teal-600'>Design tools I use</h4>
<p className='text-gray-800 py-1'>photoshop</p>
<p className='text-gray-800 py-1'>Aftereffects</p>
<p className='text-gray-800 py-1'>Blender</p>
<p className='text-gray-800 py-1'>Figma</p>
</div>
<div className='text-center shadow-lg p-10 rounded-xl my-10'>
<Image src={design} width={100} height={100} />
<h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
<p className='py-2'>
Creating elegant designs suited for your needs
</p>
<h4 className='py-4 text-teal-600'>Design tools I use</h4>
<p className='text-gray-800 py-1'>photoshop</p>
<p className='text-gray-800 py-1'>Aftereffects</p>
<p className='text-gray-800 py-1'>Blender</p>
<p className='text-gray-800 py-1'>Figma</p>
</div>
<div className='text-center shadow-lg p-10 rounded-xl my-10 '>
<Image src={design} width={100} height={100} />
<h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
<p className='py-2'>
Creating elegant designs suited for your needs
</p>
<h4 className='py-4 text-teal-600'>Design tools I use</h4>
<p className='text-gray-800 py-1'>photoshop</p>
<p className='text-gray-800 py-1'>Aftereffects</p>
<p className='text-gray-800 py-1'>Blender</p>
<p className='text-gray-800 py-1'>Figma</p>
</div>
</div>
</section>

Answer 1

Problem: You are not assigning any styling that would center the image.
Solution: Use Flexbox or Grid to structure elements. (center the image in your case)
Example:
<div className='text-center shadow-lg p-10 rounded-xl my-10 flex flex-col items-center'>
<Image src={design} width={100} height={100} />
<h3 className='text-lg font-medium pt-8 pb-2'>Beautiful designs</h3>
<p className='py-2'>
Creating elegant designs suited for your needs
</p>
<h4 className='py-4 text-teal-600'>Design tools I use</h4>
<p className='text-gray-800 py-1'>photoshop</p>
<p className='text-gray-800 py-1'>Aftereffects</p>
<p className='text-gray-800 py-1'>Blender</p>
<p className='text-gray-800 py-1'>Figma</p>
</div>