How can I center the second row to the middle

My goal is to create a up and down carousel but I am trying to figure out how to center the second row of elements shown in the photo. I am currently using tailwindcss to make this happen Carousel
const Carousel = () => {
return (
<div className='grid grid-cols-2 gap-12 justify-center items-center'>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
</div>
)
}

export default Carousel;
const Carousel = () => {
return (
<div className='grid grid-cols-2 gap-12 justify-center items-center'>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
<div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

</div>
</div>
)
}

export default Carousel;
No description
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server