Centered CTA
A centred heading, sub-copy and a primary/secondary button pair - the default closing call-to-action.
3 個のフレームワーク初級
A heading over an inline email field and submit button - the whole CTA is the signup.
<!--
A real <form> with a real <label>. The label is visually hidden, not absent:
a placeholder is not a label - it vanishes on the first keystroke and leaves
the field nameless to a screen reader. The row stacks below sm because a 90px
email input is a rumour, not a form.
-->
<section class="mx-auto w-full max-w-2xl px-4 py-14 text-center sm:px-6 sm:py-20">
<h2 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
Get the monthly changelog
</h2>
<p class="mx-auto mt-4 max-w-lg text-base leading-relaxed text-gray-600 dark:text-gray-400">
One email a month. New features, nothing else. Unsubscribe any time.
</p>
<form class="mx-auto mt-8 flex w-full max-w-md flex-col gap-3 sm:flex-row" action="#" method="post">
<label class="sr-only" for="cta-email">Email address</label>
<input
id="cta-email"
name="email"
type="email"
autocomplete="email"
placeholder="you@company.com"
required
class="w-full min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900"
/>
<button
type="submit"
class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none sm:w-auto dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900"
>
Subscribe
</button>
</form>
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400">We only email once a month.</p>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title必須 | string | - | カードの見出しテキスト。 |
copy | string | - | タイトルの下に表示される本文。 |
placeholder | string | 'you@company.com' | Placeholder |
ctaLabel | string | 'Subscribe' | CTA ボタンのテキスト。 |
note | string | - | 注記の小さな一文(料金に含まれないものなど)。 |
loading | boolean | false | true の間はスピナーを表示し、入力をブロックします。 |
The label is `sr-only`, not missing: a placeholder is not a label - it vanishes on the first keystroke and leaves the field nameless in the accessibility tree. The row stacks below `sm` because a 90px email input is a rumour, and `loading` disables the button so a double-tap cannot double-subscribe.