Cultural Event Details - Copy this React, Tailwind Component to your project

<div className='flex flex-col md:flex-row gap-6 px-10'> <span className='flex flex-col gap-2 md:w-1/2 w-full'> <h1 className='text-2xl font-bold'> {item?.title} </h1> <p className='text-gray-500 text-left md:text-lg text-sm'> {item?.description} </p> <motion.button className='bg-cyan-600 text-white px-4 py-2 rounded-md w-fit mx-auto' whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > Xem thêm </motion.button> </span> <div className='md:w-1/2 w-full md:order-none order-first'> <Image src={item?.medias[2]?.mediaUrl || imagetradition.src} alt="introduce content" width={600} height={400} className='w-full h-1/2' /> </div> </div> create to me best layout, image is right and content is left button under content