FreeForms

Newsletter Signup

Use this component for blog pages, footer CTAs, resource libraries, waitlists, and product update subscriptions.

ReactTailwind CSSFormNewsletter

Get the launch notes

Monthly UI patterns for founders and builders.

Overview

A compact newsletter signup card with email input and rounded CTA.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<NewsletterSignup />

Newsletter Signup.tsx

tsx

export function NewsletterSignup() {
  return (
    <div className="w-full max-w-md rounded-2xl border border-white/10 bg-zinc-950 p-5 text-center text-white">
      <h3 className="text-2xl font-black">Get the launch notes</h3>
      <p className="mt-2 text-sm text-zinc-400">Monthly UI patterns for founders and builders.</p>
      <div className="mt-5 flex rounded-full border border-white/10 bg-black p-1">
        <input placeholder="you@company.com" className="min-w-0 flex-1 bg-transparent px-4 text-sm outline-none" />
        <button className="rounded-full bg-lime-300 px-4 py-2 text-xs font-bold text-zinc-950">Join</button>
      </div>
    </div>
  );
}