Verify Account

This is the preview text of the email
Untitled
import {
  Body,
  Button,
  Container,
  Column,
  Head,
  Heading,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Font,
  Row,
  Section,
  Text,
  Tailwind,
} from "@react-email/components";
import * as React from "react";
 

export default function Email() {
  return (
    <Html lang="en" dir="ltr">
      <Head/>
        <Preview>This is the preview text of the email</Preview>
          <Font
            fontFamily="Inter"
            fallbackFontFamily="apple system, -apple, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"
            webFont={{
              url: "<https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2>",
              format: "woff2",
            }}
          />
          
          <Tailwind>
            <Body className="bg-gray-500 max-w-[480px] mx-auto my-auto">
              <Container className="bg-white mt-[32px] p-[20px] leading-[24px] tracking-normal">
              <Section>
  <Row>
    <Column 
      className="max-w-[32px]" 
      align="left" 
      width="32px"
    >
      <Img 
        src="<https://tinypic.host/images/2024/07/25/recore-icon-blue.png>"  
        width="32px"
      />
    </Column>
    <Column>
      <Heading 
        as="h2" 
        className="text-[20px] font-medium ml-2 text-blue-600"
      >
        ReCore
      </Heading>
    </Column>
  </Row>
</Section>
              <Text className="text-[16px] text-gray-600">Hi Nigel</Text>
              <Text className="text-[16px] text-gray-600">Thanks for joinging ReCore! The next step is to activate your acount. To do so please click the button below and we will take you into your account.</Text>
              <Section >
              <Button
                href="<https://example.com>"
                className="bg-blue-600 text-white font-bold py-2 px-4 rounded mt-4" > 
                Verify Account
              </Button>
              </Section>
              <Section  >
                <Row className="mt-[40px]">
                  <Column align="right" style={{ width: "45%"  }}  >
                  <Link href="#">
                  <Img   src="<https://tinypic.host/images/2024/07/13/X.png>" alt="X" border="0" width="22px"></Img>
                  </Link>
                  </Column>
                  <Column   >
                  <Link href="#">
                  <Img style={{margin: "auto"}} src="<https://tinypic.host/images/2024/07/13/Linkedin.png>" alt="Linkedin" border="0" width="22px" ></Img>
                  </Link>
                  </Column>
                  <Column align="left" style={{ width: "45%" }}>
                  <Link href="#">
                  <Img  src="<https://tinypic.host/images/2024/07/13/Instagram.png>" alt="Instagram" border="0" width="22px"></Img>
                  </Link>
                  </Column>                               
                </Row>
              </Section>
              <Section>
              <Text className="text-[13px] text-gray-400 text-center"><Link className="text-blue-600 underline underline-offset-2" href="#">ReCore</Link> is committed to helping you build your email design system. If you'd prefer to not receive these emails, please <Link className="text-blue-600 underline underline-offset-2" href="#">unsubsribe</Link> or <Link className="text-blue-600 underline underline-offset-2" href="#">manage your email preferences</Link>.</Text> 
              <Text className="text-[13px] text-gray-400 text-center">MidnightUI 420 George Street, Sydney, NSW 2000 Australia </Text>
              </Section>
               
              </Container>
            </Body>
          </Tailwind>
    </Html>
  );
}