| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Undefined Colors Web Template</title> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
|
|
| |
| <script src="https://unpkg.com/feather-icons"></script> |
|
|
| |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: 'rgb(var(--color-primary) / <alpha-value>)', |
| 100: 'rgb(var(--color-primary) / <alpha-value>)', |
| 200: 'rgb(var(--color-primary) / <alpha-value>)', |
| 300: 'rgb(var(--color-primary) / <alpha-value>)', |
| 400: 'rgb(var(--color-primary) / <alpha-value>)', |
| 500: 'rgb(var(--color-primary) / <alpha-value>)', |
| 600: 'rgb(var(--color-primary) / <alpha-value>)', |
| 700: 'rgb(var(--color-primary) / <alpha-value>)', |
| 800: 'rgb(var(--color-primary) / <alpha-value>)', |
| 900: 'rgb(var(--color-primary) / <alpha-value>)', |
| }, |
| secondary: { |
| 50: 'rgb(var(--color-secondary) / <alpha-value>)', |
| 100: 'rgb(var(--color-secondary) / <alpha-value>)', |
| 200: 'rgb(var(--color-secondary) / <alpha-value>)', |
| 300: 'rgb(var(--color-secondary) / <alpha-value>)', |
| 400: 'rgb(var(--color-secondary) / <alpha-value>)', |
| 500: 'rgb(var(--color-secondary) / <alpha-value>)', |
| 600: 'rgb(var(--color-secondary) / <alpha-value>)', |
| 700: 'rgb(var(--color-secondary) / <alpha-value>)', |
| 800: 'rgb(var(--color-secondary) / <alpha-value>)', |
| 900: 'rgb(var(--color-secondary) / <alpha-value>)', |
| }, |
| }, |
| }, |
| }, |
| }; |
| </script> |
|
|
| <style> |
| :root { |
| |
| --color-primary: 0 0 0; |
| --color-secondary: 0 0 0; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gray-50 text-gray-800 antialiased"> |
| |
| <header class="sticky top-0 z-30 border-b border-gray-200 bg-white/70 backdrop-blur"> |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| <div class="flex h-16 items-center justify-between"> |
| <a href="#" class="flex items-center gap-2 font-semibold text-gray-900"> |
| <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-undefined-500 text-white"> |
| |
| <i data-feather="box" class="h-5 w-5"></i> |
| </span> |
| <span>Brand</span> |
| </a> |
| <nav class="hidden items-center gap-6 text-sm font-medium text-gray-600 md:flex"> |
| <a href="#" class="hover:text-gray-900">Features</a> |
| <a href="#" class="hover:text-gray-900">Pricing</a> |
| <a href="#" class="hover:text-gray-900">Docs</a> |
| <a href="#" class="rounded-md bg-undefined-500 px-3 py-2 text-white hover:bg-undefined-600 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2"> |
| Get Started |
| </a> |
| </nav> |
| <button class="md:hidden inline-flex items-center justify-center rounded-md p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-undefined-400"> |
| <i data-feather="menu" class="h-6 w-6"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="relative overflow-hidden bg-white"> |
| <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8"> |
| <div class="grid items-center gap-12 lg:grid-cols-2"> |
| <div> |
| <span class="inline-flex items-center rounded-full bg-undefined-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-undefined-700 ring-1 ring-inset ring-undefined-500/20"> |
| Undefined Mode |
| </span> |
| <h1 class="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl"> |
| Build with undefined primary and secondary colors |
| </h1> |
| <p class="mt-4 max-w-prose text-gray-600"> |
| This template is ready for your brand. Configure --color-primary and --color-secondary in the head, then use |
| bg-undefined-500, text-undefined-600, border-undefined-400, and more. |
| </p> |
| <div class="mt-8 flex flex-wrap gap-3"> |
| <a href="#" class="inline-flex items-center gap-2 rounded-md bg-undefined-500 px-4 py-2.5 font-medium text-white hover:bg-undefined-600 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2"> |
| <i data-feather="zap" class="h-5 w-5"></i> |
| Primary Action |
| </a> |
| <a href="#" class="inline-flex items-center gap-2 rounded-md border border-undefined-400 bg-white px-4 py-2.5 font-medium text-undefined-700 hover:bg-undefined-50 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2"> |
| <i data-feather="compass" class="h-5 w-5"></i> |
| Secondary |
| </a> |
| </div> |
| <div class="mt-8 grid w-full max-w-xl grid-cols-3 gap-6"> |
| <div class="rounded-lg border border-undefined-200 bg-white p-4"> |
| <div class="text-sm font-medium text-gray-700">Usage</div> |
| <div class="mt-1 text-xs text-gray-500">bg-undefined-500</div> |
| </div> |
| <div class="rounded-lg border border-undefined-200 bg-white p-4"> |
| <div class="text-sm font-medium text-gray-700">States</div> |
| <div class="mt-1 text-xs text-gray-500">hover:bg-undefined-600</div> |
| </div> |
| <div class="rounded-lg border border-undefined-200 bg-white p-4"> |
| <div class="text-sm font-medium text-gray-700">Text</div> |
| <div class="mt-1 text-xs text-gray-500">text-undefined-700</div> |
| </div> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="absolute -left-8 -top-8 h-40 w-40 rounded-full bg-undefined-500/20 blur-2xl"></div> |
| <div class="absolute -bottom-8 -right-8 h-40 w-40 rounded-full bg-undefined-500/20 blur-2xl"></div> |
| <div class="relative rounded-xl border border-undefined-200 bg-white p-6 shadow-sm"> |
| <div class="flex items-center gap-3 border-b border-undefined-200 pb-4"> |
| <div class="h-3 w-3 rounded-full bg-red-400"></div> |
| <div class="h-3 w-3 rounded-full bg-yellow-400"></div> |
| <div class="h-3 w-3 rounded-full bg-green-400"></div> |
| </div> |
| <pre class="mt-4 overflow-x-auto rounded-md bg-gray-900 p-4 text-sm text-gray-100"> |
| <span class="text-gray-400">// Tailwind config (extend colors)</span> |
| <span class="text-emerald-400">theme</span>: { |
| <span class="text-emerald-400">extend</span>: { |
| <span class="text-emerald-400">colors</span>: { |
| <span class="text-sky-400">primary</span>: { <span class="text-fuchsia-400">500</span>: <span class="text-amber-300">'rgb(var(--color-primary) / <alpha-value>)'</span> }, |
| <span class="text-sky-400">secondary</span>: { <span class="text-fuchsia-400">500</span>: <span class="text-amber-300">'rgb(var(--color-secondary) / <alpha-value>)'</span> }, |
| } |
| } |
| } |
| </pre> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-gray-50"> |
| <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8"> |
| <div class="mx-auto max-w-2xl text-center"> |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900">Features using undefined colors</h2> |
| <p class="mt-3 text-gray-600"> |
| Configure the palette once and use utility classes like bg-undefined-500, text-undefined-600, border-undefined-400 across the app. |
| </p> |
| </div> |
| <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> |
| <div class="rounded-xl border border-undefined-200 bg-white p-6 shadow-sm"> |
| <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-undefined-500/10 text-undefined-700 ring-1 ring-inset ring-undefined-500/20"> |
| <i data-feather="cpu" class="h-5 w-5"></i> |
| </div> |
| <h3 class="mt-4 text-lg font-semibold text-gray-900">Performance</h3> |
| <p class="mt-2 text-sm text-gray-600">Lightweight and fast with Tailwind’s utility-first approach.</p> |
| </div> |
| <div class="rounded-xl border border-undefined-200 bg-white p-6 shadow-sm"> |
| <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-undefined-500/10 text-undefined-700 ring-1 ring-inset ring-undefined-500/20"> |
| <i data-feather="shield" class="h-5 w-5"></i> |
| </div> |
| <h3 class="mt-4 text-lg font-semibold text-gray-900">Reliability</h3> |
| <p class="mt-2 text-sm text-gray-600">Sturdy components built to scale with your product.</p> |
| </div> |
| <div class="rounded-xl border border-undefined-200 bg-white p-6 shadow-sm"> |
| <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-undefined-500/10 text-undefined-700 ring-1 ring-inset ring-undefined-500/20"> |
| <i data-feather="sliders" class="h-5 w-5"></i> |
| </div> |
| <h3 class="mt-4 text-lg font-semibold text-gray-900">Customizable</h3> |
| <p class="mt-2 text-sm text-gray-600">Tweak colors by updating CSS variables in the head.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white"> |
| <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8"> |
| <div class="flex flex-col items-center justify-between gap-6 rounded-2xl border border-undefined-200 bg-gradient-to-br from-white to-undefined-50 p-8 text-center shadow-sm lg:flex-row lg:text-left"> |
| <div> |
| <h3 class="text-2xl font-bold text-gray-900">Ready to define your brand?</h3> |
| <p class="mt-1 text-gray-600">Set --color-primary and --color-secondary, then enjoy consistent tokens across Tailwind.</p> |
| </div> |
| <div class="flex gap-3"> |
| <a href="#" class="inline-flex items-center gap-2 rounded-md bg-undefined-500 px-5 py-3 font-medium text-white hover:bg-undefined-600 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2"> |
| <i data-feather="arrow-right" class="h-5 w-5"></i> |
| Start now |
| </a> |
| <a href="#" class="inline-flex items-center gap-2 rounded-md border border-undefined-400 bg-white px-5 py-3 font-medium text-undefined-700 hover:bg-undefined-50 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2"> |
| Learn more |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="border-t border-gray-200 bg-white"> |
| <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8"> |
| <div class="flex flex-col items-center justify-between gap-6 sm:flex-row"> |
| <p class="text-sm text-gray-500">© <span id="year"></span> Your Company. All rights reserved.</p> |
| <div class="flex items-center gap-4 text-gray-500"> |
| <a href="#" class="hover:text-gray-700"><i data-feather="github" class="h-5 w-5"></i></a> |
| <a href="#" class="hover:text-gray-700"><i data-feather="twitter" class="h-5 w-5"></i></a> |
| <a href="#" class="hover:text-gray-700"><i data-feather="mail" class="h-5 w-5"></i></a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| |
| document.getElementById('year').textContent = new Date().getFullYear(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
