Posted on Sep 23 Have you ever seen beautiful emails like the one below, and have wanted to send one too?Well, I am here to tell you that it's really easy.To being able to create such stunning emails, you will need to know the following : Okay, so the first step is to create a NextJS + TailwindCSS project. For this we use the following steps (also present here 👈🏻 : Add the paths to all of your template files in your tailwind.config.js file.Add the @tailwind directives for each of Tailwind’s layers to your globals.css file.Now install Resend and React-Email as there are what will help us in creating the amazing Email templates that you see.Resend and React-Email, both created by @zenorocha as great tools for the creation and sending of beautiful emails using ReactJS/ NextJS. As it says on their homepage : And with React-Email that provides us 👇🏻: They basically form an :Now that the setup and introduction of the libraries are done,React-email recommends and works the best when you use the components provided by the library ( we installed them earlier)But to be able to view the React-Email component changes, we have to : So instead of using the email server, we use the normal dev server of NextJS to create the template and view it and then convert it into a React-Email components based format(which is super easy).The most important part of this application is the actual mail. There are some limitations while using TailwindCSS to create this email : So sticking to a simple UI, you can create one like I built 👇🏻 : Or you can edit this UI by @zenorocha :Copy my Email Template 👈🏻 Here.The original NextJS code is as below, and you have to make changes as following to create an email template that can be rendered properly : Now Resend requires us to create an account and use a verified domain to send the Emails. If you have a domain you can use it for the same, or if you are a student, you can use the following guide by FreeCodeCamp⛺️ to get a free domain.One you are done, you can go to Vercel ✌🏻 .Head on to Domains dashboard 👇🏻 and add your domain : Add the Domain to Resend dashboard, using the Add Domain button as shown : You will see some configurations, that you need to add to your Nameservers settings.Follow the guide as shown in the official guides here 👉🏻Create a New API key from Resend, once your Domain has been verified.Inside the src route you will see an api folder.Create a new file inside the folder called : mailer.js(or any other name that you like) and add the following code to use resend 🛠️ :Now run the following command on your shell to start your NextJS server :And open the following link on your browser :You will see a response like this :And there you have it : Your Personal Email Marketing or Referral Asking Application!! Templates let you quickly answer FAQs or store snippets for re-use.Really nicely written article Vinit! Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Hasan Zohdy - Sep 16 Shaan Alam - Sep 11 Alan North - Sep 14 Tim Smith - Sep 21 Once suspended, Thevinitgupta will not be able to comment or publish posts until their suspension is removed. Once unsuspended, thevinitgupta will be able to comment and publish posts again. Once unpublished, all posts by thevinitgupta will become hidden and only accessible to themselves. If thevinitgupta is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Vinit Gupta. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag thevinitgupta: thevinitgupta consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging thevinitgupta will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.