webdevpuneet.com

Related Snippets

63 in Heroes category
55–60 of 60

Coming Soon Hero

Agency Hero

Portfolio Hero

App Download Hero

Gradient Mesh Hero

Product Hero

Product Hero — Free HTML CSS JS Email Capture Snippet

Product Hero · Heroes · Plain HTML, CSS & JS · Live preview

CategoryHeroes
TagsText EffectsE-CommerceLanding Page

Copy & paste

Source Code

<section class="hero">
  <div class="pill">✦ Loved by 12,000+ product teams</div>

  <h1 class="headline">
    The <em>smarter</em> way to<br>manage your workflow
  </h1>

  <p class="sub">Streamline your entire product pipeline in one place. No more scattered tools, missed deadlines, or lost context — just clean, fast, focused work.</p>

  <form class="capture" onsubmit="handleSubmit(event)">
    <input class="email-inp" type="email" placeholder="Enter your work email…" required />
    <button type="submit" class="btn-cta">Get early access</button>
  </form>

  <p class="disclaimer">Free 14-day trial · No credit card · Cancel anytime</p>

  <div class="browser-wrap">
    <div class="browser-bar">
      <span class="dot red"></span>
      <span class="dot yellow"></span>
      <span class="dot green"></span>
      <div class="url-bar">app.yourproduct.com</div>
    </div>
    <div class="screen">
      <div class="app-top">
        <div class="app-nav">
          <div class="nav-logo"></div>
          <div class="nav-links">
            <div class="nav-item active"></div>
            <div class="nav-item"></div>
            <div class="nav-item"></div>
          </div>
          <div class="nav-btn"></div>
        </div>
      </div>
      <div class="app-body">
        <div class="sidebar-col">
          <div class="sb-item active"></div>
          <div class="sb-item"></div>
          <div class="sb-item"></div>
          <div class="sb-item"></div>
        </div>
        <div class="main-col">
          <div class="card-row">
            <div class="card-block blue"></div>
            <div class="card-block purple"></div>
            <div class="card-block green"></div>
          </div>
          <div class="table-mock">
            <div class="row-mock head"></div>
            <div class="row-mock"></div>
            <div class="row-mock"></div>
            <div class="row-mock"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Email capture form: flex input + CTA button with JS success feedback state
Italic gradient headline: em + background-clip:text for typographic accent
Trust pill badge: light blue background, border, colour-coded for credibility
Browser chrome mockup: three coloured dots + URL bar + simulated app UI
App UI placeholder: sidebar, stat cards, and table rows as coloured blocks
Mockup sits flush to bottom — peek-below-the-fold scroll encouragement
Light background (#fafafa) — works on white or off-white page backgrounds
Disclaimer line: trial length, no credit card, cancel anytime in one line

About this UI Snippet

Product Hero Section — Email Capture Form, Browser Mockup & Light Design

Screenshot of the Product Hero snippet rendered live

If you are building a product landing page and need to collect email sign-ups before launch, this snippet gives you a complete above-the-fold section: a trust pill badge, a large headline with italic gradient accent, a subtitle, an email capture form with success feedback, a disclaimer line, and a browser chrome mockup frame showing a placeholder app UI.

This is the standard pattern used by high-converting SaaS waitlist pages and product launches.

The email capture form

The .capture form uses display: flex so the email input and CTA button sit side by side on desktop. On submit, handleSubmit() prevents the default form action, shows a "✓ You're on the list!" success state on the button with a green background, and resets after 3 seconds. In production, replace the timeout with your actual API call to a mailing list service (Mailchimp, ConvertKit, Resend) or your own backend.

The italic gradient headline

The em element inside the headline uses the same background-clip: text technique as other gradient text snippets — but wrapped in an italic element for added visual differentiation. italic + gradient is a high-impact typographic combination that draws attention to the key differentiating word without using a separate colour or size.

The browser chrome mockup

The .browser-wrap creates a realistic browser window frame: three coloured dots (red, yellow, green), a fake URL bar, and a simulated app interface below. The app UI uses placeholder blocks (sidebar items, stat cards, table rows) to suggest a real product without requiring screenshots. This communicates "this is a real application" without needing finished designs.

The mockup sits below the fold with no bottom border-radius — it extends to the edge, creating a peek-below-the-fold effect that encourages scrolling.

Customising for your product

Replace the pill text with your actual user count or trust signal. Update the headline and subtitle. Wire the form to your email list API. Replace the browser mockup with a real screenshot — set background: url("your-screenshot.png") on .screen, background-size: cover.

A/B testing considerations

The email-capture-below-headline layout is one of the highest-converting hero patterns for pre-launch pages. Common A/B variants to test: (1) a single large "Get early access" CTA without the email input — fewer fields, higher click rate, but lower email quality; (2) moving the browser mockup to the right side for a split-hero layout. The disclaimer line ("Free 14-day trial · No credit card · Cancel anytime") consistently increases submit rate — do not remove it without testing.

Step by step

How to Use

  1. 1
    Update the trust pill and headlineChange the pill text to your real user count ("Loved by 12,000+ teams"). Edit the headline and wrap the key differentiating word in the em tag for the gradient italic effect.
  2. 2
    Wire the email form to your APIIn the JS panel, replace the setTimeout in handleSubmit() with a fetch call to your email service endpoint. The button shows a success state on the same click — no page reload needed.
  3. 3
    Replace the browser mockupTo show a real screenshot, set background: url("screenshot.png"); background-size: cover; on the .screen element. Remove the .app-top and .app-body placeholder content. Keep .browser-bar for the chrome effect.
  4. 4
    Change the gradient accentIn CSS, find .headline em and update the background gradient colours. Also update .btn-cta background and .email-inp focus border-color to match your brand accent.
  5. 5
    Update the disclaimer textEdit the .disclaimer paragraph to match your actual trial terms — "14-day free trial", "No credit card required", and "Cancel anytime" are the three standard trust signals for SaaS sign-ups.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component with onSubmit handler and useState for the button feedback state, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

SaaS waitlist and early-access email collection pages
The email capture form with inline success feedback is the standard pattern for pre-launch waitlist pages. Replace the form action with your API endpoint (Mailchimp, ConvertKit, Resend) and show the success state immediately on submit without a page reload.
Product launch landing pages with app preview
The browser chrome mockup communicates "this is a real product" even when screenshots are not ready. Use the placeholder blocks during development, then swap in a real screenshot by setting background: url() on .screen once designs are complete.
B2B software and productivity tool homepages
The italic gradient headline, trust pill user count, and email capture form are the conversion-optimised pattern for B2B SaaS. The "work email" placeholder signals enterprise positioning and helps filter consumer sign-ups from the waitlist.
Light-themed product pages and marketing sites
The light background (#fafafa) pairs with white content sections below the hero. The browser mockup creates visual hierarchy — the hero commands the top, the mockup extends into the next scroll section, creating a natural eye path downward.
Study browser chrome mockup and email form feedback patterns
The browser chrome uses only div elements with specific border-radius, colour, and spacing — no images or SVGs. The handleSubmit() pattern shows an in-button success state with a timeout reset — a technique applicable to any async form submission in any project.
Newsletter landing pages and content creator sign-up flows
Adapt for newsletter sign-ups by changing the CTA to "Subscribe" and the pill to subscriber count. The email-only form without a password field is the lowest-friction sign-up pattern — reducing the form to one field consistently improves conversion rates.
Related: Hero with Social Proof Logo Strip
See the Hero with Social Proof Logo Strip for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Replace the setTimeout inside handleSubmit() with a fetch call: await fetch("/api/subscribe", { method: "POST", headers: {"Content-Type":"application/json"}, body: JSON.stringify({ email: e.target.querySelector(".email-inp").value }) }). Show the success state on resolve and an error state (red button) on reject. For Mailchimp, use their embedded form action URL directly as the form action attribute and submit natively, or use their API with a server-side proxy to hide your API key.

Remove the .app-top and .app-body div elements from the HTML. On the .screen element, add style="background: url('screenshot.png') center top / cover no-repeat; height: 320px;" — or set it in the CSS panel. Keep the .browser-bar for the chrome effect above the screenshot. For a sharper result, export your screenshot at 2× resolution and use the regular display size in CSS.

Add @media (max-width: 500px) { .capture { flex-direction: column; } .btn-cta { width: 100%; } } to the CSS. The input and button each take full width and stack naturally. The max-width: 460px on .capture keeps the layout compact on desktop while allowing full-width stack on mobile.

Yes. Click "JSX" to download a React component. Replace the inline onsubmit with a React onSubmit handler. Manage the button state with useState — const [submitted, setSubmitted] = useState(false). Conditionally show the success text: submitted ? "✓ You're on the list!" : "Get early access". In Next.js, wrap the form in a Client Component ("use client") since it uses state and event handlers.