How To Create A Stylish Email Capture Page In Tailwind CSS

Ah the classic email capture page. Just like chocolate, it’s a flavor that we all need it at some point. So it’s good to have some options ready to go when that does happen.

For this tutorial we will be building out a simple email capture page with Next.js and TailwindCSS.

If you just want to skip to the final code you can find that here.

Setup

We will start by cloning the official Next.js + TailwindCSS example repo. This will make getting setup much easier. You can find this repo here.

You can follow the instructions in the ReadMe or just run the following command locally (I am using Yarn but you can switch to npm if you prefer):

yarn create next-app --example with-tailwindcss with-tailwindcss-app

This will pull down the example to your local drive in a folder called with-tailwindcss-app. You can rename it however you like and link it to your own Github repo (comes in handy when you want to deploy).

Start Your Engines

Run the following command to start up our app:

yarn

Cleanup

Best to start with an empty slate. Let’s go in and clear out all of the divs in the return statement of index.js (our main page). You can leave the Head part in if you want (this only impacts SEO/ what the title will be in the tab).

Add Background Image

We want a full screen background image. For this we will make our main tag relative and then absolutely position our image to cover the whole space. For the image I will use the awesome Unsplash Random API (also makes it more fun with images changing on every refresh). You can change this to whichever image url you want.

<main className='relative h-screen w-screen'>
 <img
  src='https://source.unsplash.com/random'
  alt='main background image'
  className='absolute inset-0 w-full h-full object-cover'
 />
</main>

Alright so now we have an image covering our page.

Add Hero Content

Let’s add in our content now. Keeping it simple we want a headline, a supporting paragraph and a call to action. Our call to action will be a email subscription form.

Let’s create a new component called HeroContent for this.

<div className='absolute inset-0 flex justify-center items-center'
 <div className='w-full max-w-md'
  <h1 className='text-center text-3xl sm:text-4xl font-extrabold      
    sm:leading-[3rem]'>
    Your headline here.{' '}
    <span className='text-yellow-400'>Catch their attention!</span
  </h1>
  <p className='mt-6 text-lg sm:text-xl'>
   Ea esse minim reprehenderit voluptate. Ea nisi culpa magna...
  </p>
 </div>
</div>

We used position absolute to span the whole div. Then we used flex to center the div containing our content. We restricted it’s width with a max-w-md class.

For formatting we added some classes to make our text bigger and added a little color to make the headline more catchy. :D

#nextjs #web-design #tailwind-css #landing-pages #css