How can i lessen the margin between text

[ijohnpaul2000]

Hello Everyone I wanted to create a 2 column template with background image behind, this is my code and i can't tell what to do.

`import {
Body,
Button,
Column,
Container,
Head,
Heading,
Hr,
Html,
Img,
Link,
Preview,
Row,
Section,
Tailwind,
Text,
Font,
Markdown,
} from "@react-email/components";
import * as React from "react";

interface SkyshareJPLTemplateProps {
// username?: string;
userImage?: string;
// invitedByUsername?: string;
// invitedByEmail?: string;
// teamName?: string;
teamImage?: string;
// inviteLink?: string;
// inviteFromIp?: string;
// inviteFromLocation?: string;
body: string;
}

const baseUrl = process.env.VERCEL_URL
? https://${process.env.VERCEL_URL}
: "";

export const VercelInviteUserEmail = ({
// username,
userImage,
// invitedByUsername,
// invitedByEmail,
// teamName,
teamImage,
// inviteLink,
// inviteFromIp,
// inviteFromLocation,
body,
}: SkyshareJPLTemplateProps) => {
// const previewText = Join ${invitedByUsername} on Vercel;

return (


<Font
fontFamily="Roboto"
fallbackFontFamily="Verdana"
webFont={{
url: "https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
format: "woff2",
}}
fontWeight={400}
fontStyle="normal"
/>

{/* {previewText} */}

<Img
src={${baseUrl}/static/email_header.png}
width="640"
height="150"
alt="Skyshare Labs"
className="my-0 mx-auto max-w-[640px] w-full object-cover"
/>

        <Section>
          <Markdown>{body ?? "# Test"}</Markdown>
        </Section>

        <Section className="bg-red-500 relative bg-[url('https://skyshare-labs.sgp1.cdn.digitaloceanspaces.com/bg-1.png')] bg-cover bg-center bg-no-repeat p-3">
          <Row>
            {/* Personal Info */}
            <Column align="left" className="w-[50%] mb-auto">
              <Text className="text-[20px] font-semibold text-white leading-none">
                lorem
              </Text>
              <Text className="text-[14px] text-white opacity-50">
                Business Development Manager
              </Text>
              <ContactItem
                icon="https://skyshare-labs.sgp1.cdn.digitaloceanspaces.com/phone.png"
                text="+22"
              />
              <ContactItem
                icon="https://skyshare-labs.sgp1.cdn.digitaloceanspaces.com/mail.png"
                text="qweqweqwe"
              />
            </Column>
            {/* Company Info */}
            <Column align="left" className="w-[50%]">
              <Text className="text-white text-[20px] font-semibold">
                qweqweqwe
              </Text>
              <ContactItem
                icon="https://skyshare-labs.sgp1.cdn.digitaloceanspaces.com/tel.png"
                text="+1231231"
              />
              <ContactItem
                icon="https://skyshare-labs.sgp1.cdn.digitaloceanspaces.com/mail.png"
                text="qweq@qwe.com"
              />
              <ContactItem
                icon="https://skyshare-labs.sgp1.cdn.digitaloceanspaces.com/pin.png"
                text="qweqweqwe"
              />
            </Column>
          </Row>
        </Section>
      </Container>
    </Body>
  </Tailwind>
</Html>

);
};

VercelInviteUserEmail.PreviewProps = {
// username: "alanturing",
userImage: ${baseUrl}/static/vercel-user.png,
// invitedByUsername: "Alan",
// invitedByEmail: "alan.turing@example.com",
// teamName: "Enigma",
teamImage: ${baseUrl}/static/vercel-team.png,
// inviteLink: "https://vercel.com/teams/invite/foo",
// inviteFromIp: "204.13.186.218",
// inviteFromLocation: "São Paulo, Brazil",
} as SkyshareJPLTemplateProps;

export default VercelInviteUserEmail;

const ContactItem = ({ icon, text }: { icon: string; text: string }) => (


{text}

);
`