A password reset link card built with Tailwind CSS: the screen a user lands on after opening a reset link. It shows a brand header, a lock icon, a clear "Choose a new password" button with an expiry notice, a copyable secure link for finishing on another device, a highlighted security note and the details of the request. Use it as the first step of a reset flow.
How it works
The root is .tpr-reset, a slate background that frames a centered white article limited to max-w-[560px], a comfortable width for focused account screens.
The header shows the inline SVG logo and an "Account security" label. The body contains the .tpr-icon badge, the h1, a personal greeting and the account address in bold. The .tpr-button link is full width on phones and auto width from sm, followed by a clock icon and the expiry text. .tpr-link prints the raw reset URL in a monospaced box with break-all, so long tokens wrap instead of overflowing.
The .tpr-note aside uses an amber left border to tell users what to do if they did not request the reset. .tpr-meta is a two-column dl grid listing the time, device and approximate location of the request. A short line points to support, and a small footer explains why the page is shown and links to help and privacy pages.
A small script fills each .tpr-requested time element with a request time a few minutes before the page was opened, in UTC, and sets a matching datetime attribute. Without JavaScript it reads "A few minutes ago". There is no custom CSS.
Customization
bg-teal-600andhover:bg-teal-700on.tpr-button: change the call-to-action color; updatebg-teal-50 text-teal-600on.tpr-iconto match.max-w-[560px]on thearticleand the footer: widen it if your auth screens use a larger card.- The expiry sentence below the button: keep it in sync with the token lifetime your backend enforces.
MINUTES_AGOin script.js: the sample offset for the request time; replace the script with the real timestamp from your server..tpr-meta: add rows such as IP address or browser, or remove the wholedlif you do not collect request data.border-amber-400 bg-amber-50on.tpr-note: switch torosefor a stronger warning tone.
Use cases
- Web apps and SaaS: the page users land on after clicking the link in a reset message
- Account security flows: a highlighted note tells people what to do if they did not request the reset
- Cross-device resets: a copyable secure link lets users finish the reset on another device
- Online shops and memberships: show the request time, device and location so users can spot suspicious activity
- Authentication kits: use it as the first step before your new password form
Accessibility
The card is an article labelled by its h1, and the security note is an aside labelled by its own heading. Decorative icons are aria-hidden. The button and links have visible focus outlines, the secure link is real text that can be selected and copied, and the request time uses a time element with a machine-readable datetime. Text colors on white and amber backgrounds meet contrast guidelines.
Usage notes
Point .tpr-button to your new password form and fill the greeting, account address, reset URL and request details on the server. This is a web component; the reset message itself needs table-based HTML with inline styles.
