Styling my contentful blog page on my website - api

Question

I'm trying to style my blogs page for my website. I integrated my Contentful blog using API's and its all displayed correctly, but I just don't know how to target individual elements to style them individually. I would like to be able to
Style my main blogs page asa grid layout, attached is the specific grid layout I would like to achieve. I've also attached what my current main blogs page looks like now. I just don't know the code syntax to achieve this
I would like to style my individual (slug) blogs page simply adding space between each paragraphs, I jus don't know the code syntax to achieve this
I would like to be able to add tags to fetch the tags from my Contentful and display them on my blogs main page and on the individual slugs page
I've also attatched all the data that I have from contentful, could someone point me in the right direction for the syntax to use for the things I want to do? Thanks!
The grid layout I would like to achieve
My current grid layout
My blogs.js code
```import Navbar from "../components/Navbar/Navbar";
import Footer from "../components/Footer/Footer";
import { createClient } from "contentful";
import BlogCard from "../components/BlogCard/BlogCard";
export async function getStaticProps() {
const client = createClient({
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
previewacessToken: process.env.PREVIEW_ACCESS_TOKEN,
});
const res = await client.getEntries({ content_type: "menuItem" });
return {
props: {
blog: res.items,
},
};
}
export default function Blog({ blog }) {
console.log(blog);
return (
<div>
<div className="bg-[#F5f5f5] pt-16">
<div className="flex flex-col">
<header>
{" "}
<Navbar />
</header>
<main className="flex-1">
<div className="relative left-1/2 mt-12 min-w[100vw] translate-x-[-50%]">
<div className="relative mx-auto pb-30 lg:pb-30">
<div className="px-6 md:px-8.5 lg:px-40">
<div className="mx-auto max-w-container">
<div className="max-md:w-screen max-md:pr-5">
<div className="grid grid-cols-2 grid-rows-2 gap-10 mt-24 mb-32 h-full sm:grid-cols-2 sm:h-full sm:w-full md:mb-24 md:w-full max-lg:block max-md:mt-16">
{blog.map((menuItem) => (
<BlogCard key={menuItem.sys.id} menuItem={menuItem} />
))}
</div>
</div>
</div>
<Footer />
</div>
</div>
</div>
</main>
</div>
</div>
</div>
);
}```
My slug.js code
``` return (
<div>
<div className="bg-[#F5f5f5] pt-16">
<div className="flex flex-col">
<header>
<Navbar />
</header>
<main className="flex-1">
<div className="relative left-1/2 mt-12 min-w[100vw] translate-x-[-50%]">
<div className="relative mx-auto pb-30 lg:pb-30">
<div className="px-6 md:px-8.5 lg:px-40">
<div className="mx-auto max-w-container">
<div className="py-24 px-40 mx-auto leading-7 text-center0 md:mx-auto max-lg:px-0 max-md:px-0 max-md:py-16">
<p>{date}</p>
<p className="leading-7 text-left pb-10 max-md:-mb-5">
{author}
</p>
<h1 className="pb-20 w-full max-w-full h-auto text-5xl font-bold text-left md:w-full">
{title}
</h1>
<Image
className="pb-20 w-full max-w-full h-auto leading-7 max-md:-mt-8 max-md:pb-5"
src={"https:" + image.fields.file.url}
width={image.fields.file.details.image.width}
height={image.fields.file.details.image.height}
alt=""
/>
<div>
<div>{documentToReactComponents(text)}</div>
<div className="pb-10">
{documentToReactComponents(text.content.paragraph)}
</div>
</div>
</div>
<Footer />
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
);
}
```
My Individual blog card code
````export function BlogCard({ menuItem }) {
const { title, slug, date, author, image, shortDescription } =
menuItem.fields;
return (
<Link href={"/Blogs/" + slug}>
<div>
<Image
src={"https:" + image.fields.file.url}
width={image.fields.file.details.image.width}
height={image.fields.file.details.image.height}
alt=""
/>
</div>
<div className="mr-auto">
<div className="content">
<div className="info">
<h2>{title}</h2>
<p className="pb-5">{shortDescription}</p>
<p className="pb-2">{date}</p>
<p>{author}</p>
</div>
</div>
</div>
</Link>
);
}
export default BlogCard;```