|
|
<!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> |
