Create a file with any name you like in src/templates folder. (I'm using templates.html)

Let's then build a simple UI for our email, one that looks like this,

The code for the same is,

---
title: "Confirm your email"
preheader: "Please confirm you email in order to activate your account"
---

<extends src="src/layouts/master.html">
    <block name="template">
        <table class="flex flex-col justify-items-center items-center">
            <tr class="">
                <td class="pt-32  text-center text-4xl">
                    <p>My Template</p>
                </td>
            </tr>
            <tr>
                <td class="bg-white w-600 rounded-sm shadow-sm">
                    <table class="px-32 pt-24 pb-32">
                        <tr>
                            <td>
                                <p class="text-xl text-gray-700">Hello, $name</p>
                                <p class="text-4xl">You're Joining with Us?</p>
                                <p class="text-base font-serif">We are glad to have you on board :), Plesae confirm your
                                    mail first. </p>
                                <div class="hover-bg-indigo-600"
                                    style="mso-padding-alt: 16px 24px; background-color: #6366f1; border-radius: 4px; width: 50%;">
                                    <a href="$link"
                                        style="display: block; font-weight: 600; font-size: 16px; line-height: 100%; margin-right: 2px; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; color: #ffffff; text-decoration: none;">Confirm
                                        email address →</a>
                                </div>
                                <div style="padding-top: 16px;">
                                    or alternatively you can copy paste the below link in your browser tab
                                    <a href="$link" style="color: #4f46e5;">$link</a>
                                </div>
                                <hr class="mt-32" />
                                <p class="text-xl"> If this is not you joining us, you can ignore it safely <br /><br>
                                    Thanks,<br>
                                    Team Bloggy
                                </p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 32px;"
                class="text-center">
                <td>
                    <div class="text-center">
                        <a href="https://twitter.com" style="margin-right: 8px;">
                            <img src="https://img.icons8.com/cotton/344/twitter.png"
                                style="border: 0; line-height: 100%; max-width: 100%; vertical-align: middle; height: 40px; width: 40px;"
                                alt="">
                        </a>
                        <a href="https://facebook.com" style="margin-right: 8px;">
                            <img src="https://img.icons8.com/cotton/344/facebook.png"
                                style="border: 0; line-height: 100%; max-width: 100%; vertical-align: middle; height: 40px; width: 40px;"
                                alt="">
                        </a>
                        <a href="https://instagram.com" style="margin-right: 8px;">
                            <img src="https://img.icons8.com/cotton/344/instagram.png"
                                style="border: 0; line-height: 100%; max-width: 100%; vertical-align: middle; height: 40px; width: 40px;"
                                alt="">
                        </a>
                        <a href="https://github.com" style="margin-right: 8px;">
                            <img src="https://img.icons8.com/dusk/344/github.png"
                                style="border: 0; line-height: 100%; max-width: 100%; vertical-align: middle; height: 40px; width: 40px;"
                                alt="">
                        </a>
                    </div>
                    <p style="font-size: 16px">&copy; Maybe No Copyright </p>
                    <div>
                        <a href="#" style="margin-right: 16px; color: #111827;">Privacy Policy</a>
                        <a href="#" style="margin-right: 16px; color: #111827;">Terms & conditions</a>
                        <a href="#" style="margin-right: 16px; color: #111827;">Contact us</a>
                    </div>
                </td>
            </tr>
        </table>
    </block>
</extends>

extends is used to extend an HTML in the template. In this case, we are extending the src/layouts/main.html which will be having the portion of code which you want to have in all the templates.