Create Newsletter Sections with Tailwind CSS an d Next.JS

Tailwind CSS's utility-first design makes it easy to create a responsive and dynamic newsletter section for your Next.js application. Tailwind CSS helps you style your newsletter easily with its ready-made classes, while Next.js makes it simple to create fast and dynamic web pages. You'll learn to create responsive, visually appealing sections that work well on any device. With Tailwind and Next.js, building and customizing your newsletter will be quick and efficient.

Prerequisites

• React
• JavaScript
• NextJS
• NodeJS

Approach

To create a newsletter section in your Next.js project, first set up your Home component (page.tsx) by importing the Newsletter component. In the Newsletter component (NewsLetter.tsx), you design a simple form that includes a title, description, email input, and a subscribe button. Use Tailwind CSS to style the section, making it responsive with utility classes like bg-gray-100, text-center, and max-w-3xl. Tailwind’s built-in classes help with styling the input and button for a polished look. Ensure your package.json includes the necessary dependencies for React, Next.js, and Tailwind CSS.

Steps to create the Project and Install the required modules

Step 1: Create the NextJs App using the following command.

npx create-next-app@latest

Configuration which you should follow while creating the App:

By default installed tailwind also.

Step 2: Move to the project folder from Terminal

cd <project_name>

Project Structure:

Updated Dependencies:

  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.14"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.14"
  }

Step 3: Write the following code in different files(The name of the files is mentioned in the first line of each code block)

/*global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --background: #ffffff;
    --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
    }
}

body {
    color: var(--foreground);
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

// components/NewsLetter.tsx
import React from "react";

const Newsletter = () => {
  return (
    <section className="bg-gray-100 py-12">
      <div className="max-w-3xl mx-auto text-center">
        <h2 className="text-3xl font-semibold mb-4">
          Subscribe to our Newsletter
        </h2>
        <p className="mb-6 text-gray-600">
          Get the latest updates and offers delivered straight to your inbox.
        </p>

        <div className="flex flex-col sm:flex-row
        				justify-center items-center gap-4">
          <input
            type="email"
            placeholder="Enter your email"
            className="w-full sm:w-auto p-3 border
                       border-gray-300 rounded-md
                       focus:outline-none focus:ring-2
                       focus:ring-blue-400"
          />
          <button className="w-full sm:w-auto px-6 py-3
                             bg-blue-600 text-white rounded-md
                             hover:bg-blue-700">
            Subscribe
          </button>
        </div>
      </div>
    </section>
  );
};

export default Newsletter;

// app/page.tsx
import Newsletter from "../components/NewsLetter";

export default function Home() {
  return (
    <div>
      <Newsletter />
    </div>
  );
}

Run your app by executing below command.

npm run dev

Output: