精选最新
错误页面404 With Illustration
A 404 built around an inline single-colour SVG of a disconnected cable, with a return-home action.
#error#404#illustration
3 个框架中级
Loading…
A centred 404 with a big gradient code, a heading, sub-copy and a pair of recovery actions.
<section class="mx-auto flex w-full max-w-lg flex-col items-center px-4 py-16 text-center sm:py-24">
<p class="bg-gradient-to-b from-gray-900 to-gray-400 bg-clip-text text-7xl font-extrabold tracking-tight text-transparent sm:text-8xl dark:from-white dark:to-gray-600">
404
</p>
<h1 class="mt-4 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
Page not found
</h1>
<p class="mt-3 max-w-md text-base leading-relaxed text-gray-600 dark:text-gray-400">
Sorry, we couldn't find the page you're looking for. It may have been moved or deleted.
</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">
Contact support
</a>
</div>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
code | string | '404' | Code |
title | string | 'Page not found' | 卡片的标题文本。 |
message | string | - | 通知的正文文本。 |
homeLabel | string | 'Go home' | Home label |
homeHref | string | '/' | Home href |
contactLabel | string | 'Contact support' | Contact label |
contactHref | string | '/contact' | Contact href |
className | string | - | 合并到根元素上的额外类名。 |
Drive the big number with `code` and the copy with `title`/`message`. The two actions go full width and stack below `sm` so a phone shows one solid tap target instead of two cramped ones.