Item Display Card Grid - Copy this React, Tailwind Component to your project

<div className="container mx-auto px-4 py-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105"> <div className="grid grid-cols-2 md:grid-cols-3 gap-4" key={item.id}> <Card className="mt-6 w-96 rounded" > <CardBody> <Typography variant="h5" color="blue-gray" className="mb-2"> {item.title} </Typography> <Typography > {item.content.slice(0,100)}... </Typography> </CardBody> <CardFooter className="pt-0 "> <Link className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800' href={`/posts/${item.id}`}>Read More</Link> </CardFooter> </Card> </div> </div> </div> </div>