Kevin Powell - Community•16mo ago

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;

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How can I center the second row to the middle