新着
エラーページCentered 404 Page
A centred 404 with a big gradient code, a heading, sub-copy and a pair of recovery actions.
#error#404#not-found
3 個のフレームワーク初級
Loading…
An access-denied screen with a lock icon, a clear explanation and a request-access action.
<section class="mx-auto flex w-full max-w-lg flex-col items-center px-4 py-16 text-center sm:py-24">
<span class="flex h-16 w-16 items-center justify-center rounded-full bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="h-8 w-8" aria-hidden="true">
<rect x="4" y="11" width="16" height="10" rx="2" />
<path d="M8 11V7a4 4 0 0 1 8 0v4M12 15v2" />
</svg>
</span>
<p class="mt-6 text-sm font-semibold uppercase tracking-widest text-amber-600 dark:text-amber-400">Error 403</p>
<h1 class="mt-2 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
Access denied
</h1>
<p class="mt-3 max-w-md text-base leading-relaxed text-gray-600 dark:text-gray-400">
You don't have permission to view this page. If you think this is a mistake, ask an admin for access.
</p>
<div class="mt-8 flex w-full flex-col items-center justify-center gap-3 sm:flex-row">
<a href="/" 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-950">
Go home
</a>
<a href="/contact" class="inline-flex w-full items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 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:border-gray-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
Request access
</a>
</div>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
code | string | '403' | Code |
title | string | 'Access denied' | カードの見出しテキスト。 |
message | string | - | 通知の本文。 |
homeLabel | string | 'Go home' | Home label |
homeHref | string | '/' | Home href |
contactLabel | string | 'Request access' | Contact label |
contactHref | string | '/contact' | Contact href |
className | string | - | ルート要素にマージされる追加クラス。 |
The lock icon reads as a permissions barrier at a glance; pair the primary home link with a `Request access` action pointed at your support or admin flow. All labels and hrefs are props.