Tailwind Svelte Assistant
404-centered-simple.md•4.05 kB
# Simple Centered 404 Error Page - HTML & Tailwind CSS Example
This document provides an HTML structure and Tailwind CSS class example derived from the `404-centered-simple.svelte` Svelte snippet. This example is intended for AI consumption and may need adaptation. The component displays a simple, centered 404 error page.
## Overview
This component creates a full-page, centered message for a "Page not found" (404) error. It includes an error code, title, message, and call-to-action buttons.
## Original Svelte Component Props
The original Svelte component defines the following props:
- `errorCode: string` (default: "404") - The error code to display.
- `title: string` (default: "Page not found") - The main title of the error page.
- `message: string` (default: "Sorry, we couldn’t find the page you’re looking for.") - A descriptive error message.
- `primaryCtaText: string` (default: "Go back home") - Text for the primary call-to-action button.
- `primaryCtaLink: string` (default: "#") - Href for the primary CTA.
- `secondaryCtaText: string` (default: "Contact support") - Text for the secondary call-to-action link.
- `secondaryCtaLink: string` (default: "#") - Href for the secondary CTA.
## Theme Variables Noted in Original Snippet
- `--theme-bg-base` (e.g., `bg-white`)
- `--theme-text-base` (e.g., `text-gray-900`)
- `--theme-text-muted` (e.g., `text-gray-500`)
- `--theme-primary` (e.g., `text-indigo-600`, `bg-indigo-600`, `focus-visible:outline-indigo-600`)
- `--theme-primary-hover` (e.g., `hover:bg-indigo-500`)
- `--theme-text-on-primary` (e.g., `text-white`)
- `--theme-border-radius-md` (e.g., `rounded-md`)
## HTML Structure Example (Conceptual)
This static HTML represents the structure generated by the Svelte component using its default prop values. The original Svelte component notes that `class="h-full"` on `<html>` and `<body>` might be needed for a true full-page layout.
```html
<!-- Ensure html and body have class="h-full" for min-h-full to work as expected -->
<main class="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8"> <!-- theme: bg-theme-bg-base -->
<div class="text-center">
<p class="text-base font-semibold text-indigo-600">404</p> <!-- errorCode prop, theme: text-theme-primary -->
<h1 class="mt-4 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">Page not found</h1> <!-- title prop, theme: text-theme-text-base -->
<p class="mt-6 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Sorry, we couldn’t find the page you’re looking for.</p> <!-- message prop, theme: text-theme-text-muted -->
<div class="mt-10 flex items-center justify-center gap-x-6">
<a
href="#"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>Go back home</a> <!-- primaryCta, theme: bg-theme-primary, text-theme-text-on-primary, hover:bg-theme-primary-hover, focus-visible:outline-theme-primary -->
<a href="#" class="text-sm font-semibold text-gray-900 hover:text-gray-700">Contact support <span aria-hidden="true">→</span></a> <!-- secondaryCta, theme: text-theme-text-base, hover:text-theme-text-muted -->
</div>
</div>
</main>
```
## JavaScript Notes
- The Svelte component uses props to dynamically set the error code, title, message, and CTA button text/links.
- For static HTML, this content would be hardcoded.
## CSS Notes
- **Full Page Layout:** The component uses `min-h-full` and `place-items-center` on the `<main>` element to achieve a full-height centered layout. This typically requires `height: 100%` on the `<html>` and `<body>` tags in the global CSS.
- **Themeable Classes:** Comments indicate where theme variables could be applied for colors and other styles.
This Markdown file provides an HTML structure and class details based on the `404-centered-simple.svelte` snippet.
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/CaullenOmdahl/Tailwind-Svelte-Assistant'
If you have feedback or need assistance with the MCP directory API, please join our Discord server