> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daytalog.com/llms.txt
> Use this file to discover all available pages before exploring further.

# plain

> Example of a email with only a message

<Tabs>
  <Tab title="Preview">
    <Frame caption="Example of a email with only a message" className="mt-3">
      <iframe
        srcDoc={`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="https://assets.daytalog.com/example/obsidian.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><title>Email Starter</title></head><body style="background-color:#ffffff;color:#24292e;font-family:-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;"><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Hello World!

Best regards,
Obsidian Frame Studios<div> ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:480px;margin:0 auto;padding:20px 0 48px"><tbody><tr style="width:100%"><td><h1><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="center" data-id="__react-email-column"><img height="80" src="https://assets.daytalog.com/example/obsidian.png" style="display:block;outline:none;border:none;text-decoration:none"/></td></tr></tbody></table></h1><p style="font-size:14px;line-height:24px;padding:24px;border:solid 1px #dedede;border-radius:10px;text-align:top;min-height:320px;white-space:pre-line;margin-bottom:16px;margin-top:16px">Hello World!

Best regards,
Obsidian Frame Studios</p><p style="font-size:10px;line-height:24px;text-align:center;margin:16px 0 0;margin-bottom:0;margin-top:16px;margin-left:0;margin-right:0">Obsidian Frame Studios - 123 Hollywood Lane, Dreamville, CA 90210 </p></td></tr></tbody></table><p style="font-size:12px;line-height:24px;color:#6a737d;text-align:center;margin-top:60px;margin-bottom:16px">Powered by daytalog</p><!--7--><!--/$--></body></html>`}
        className="w-full h-[650px] rounded-xl"
        height="650px"
      />
    </Frame>
  </Tab>

  <Tab title="Code">
    ```Typescript theme={null}
    import {
      Html,
      Head,
      Heading,
      Preview,
      Body,
      Container,
      Text,
      Img,
      Column,
      Row,
    } from '@react-email/components';
    import { useDaytalog } from 'daytalog';

    const Plain: React.FC = () => {
      const { message } = useDaytalog();

      const logo = 'https://assets.daytalog.com/example/obsidian.png';
      const address = `Obsidian Frame Studios - 123 Hollywood Lane, Dreamville, CA 90210 `;

      return (
        <Html>
          <Head></Head>
          <Preview>{message?.slice(0, 100)}</Preview>
          <Body style={main}>
            <Container style={container}>
              <Heading>
                <Row>
                  <Column align={'center'}>
                    <Img src={logo} height={80} />
                  </Column>
                </Row>
              </Heading>
              <Text style={textbox}>{message}</Text>
              <Text style={footer}>{address}</Text>
            </Container>
          </Body>
        </Html>
      );
    };

    const main: React.CSSProperties = {
      backgroundColor: '#ffffff',
      color: '#24292e',
      fontFamily:
        '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
    };

    const textbox: React.CSSProperties = {
      padding: '24px',
      border: 'solid 1px #dedede',
      borderRadius: '10px',
      minHeight: '320px',
      whiteSpace: 'pre-line',
    };

    const container: React.CSSProperties = {
      maxWidth: '480px',
      margin: '0 auto',
      padding: '20px 0 48px',
    };

    const footer: React.CSSProperties = {
      fontSize: '10px',
      textAlign: 'center',
      margin: '16px 0 0',
    };

    export default Plain;

    ```
  </Tab>

  <Tab title="Message">
    <Frame caption="Message form">
      <img src="https://mintcdn.com/ditgear/kMSCr8jMSdyCHCg0/images/message-example.webp?fit=max&auto=format&n=kMSCr8jMSdyCHCg0&q=85&s=b1550976ef84469390dc3c764767b995" width="853" height="304" data-path="images/message-example.webp" />
    </Frame>
  </Tab>
</Tabs>
