Reusable Tailwind Component classes
Free up your time with pre-built classes that update site-wide automatically. Focus on building, not fixing.
Provident fugit vero voluptate. dolores voluptates inventore nisi.
Provident fugit vero voluptate. dolores voluptates inventore nisi.
Provident fugit vero voluptate. dolores voluptates inventore nisi.
New users by First user primary channel group (Default Channel Group)
| # | Date | Status | Customer | Revenue |
|---|---|---|---|---|
| 1 | 10/31/2023 | Paid | | $43.99 |
| 2 | 10/21/2023 | Ref | | $19.99 |
Features
Easy To Use
Simply copy, paste, and style your HTML projects with familiar semantic class names.
Customizable
Easily adjust components with utilities or use built-in attributes to modify your theme.
Modern Design
Follows modern design principles to create usable, accessible and stunning websites.
No more struggling with long utility classes
Simply use our copy-paste classes to keep your components consistent across your entire project.
<form action="" class="relative mx-auto w-max max-w-xl rounded-3xl border border-gray-200 bg-white p-1 dark:border-gray-800 dark:bg-gray-900">
<div class="p-8">
<div class="text-center">
<img class="mx-auto size-8" src="/logo.svg" />
<h3 class="mb-1 mt-6 text-xl font-semibold text-gray-950 dark:text-white">Sign In to Tailus UI</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Welcome back! Sign in to continue</p>
</div>
<div class="mt-6">
<button class="outline-blue-600 transtion-[filter] group flex h-8 w-full items-center justify-center gap-1.5 rounded-md bg-gray-50 px-3.5 text-sm font-medium text-gray-800 outline-2 outline-offset-2 duration-150 ease-in-out [--btn-border-color:theme(colors.gray.200)] [--inner-border-color:1] [--outline-radial-opacity:0.6] [background-image:radial-gradient(76%_151%_at_52%_-52%,rgba(255,255,255,var(--outline-radial-opacity))_0%,transparent_100%)] [box-shadow:rgba(255,255,255,var(--inner-border-color))_0px_1px_0px_0px_inset,var(--btn-border-color)_0px_0px_0px_1px,0px_1px_2px_rgba(0,0,0,0.1)] hover:brightness-[0.98] focus-visible:outline active:brightness-100 disabled:bg-gray-200 disabled:text-gray-400 disabled:shadow-none disabled:hover:brightness-100 dark:bg-gray-500/5 dark:text-gray-300 dark:[--btn-border-color:theme(colors.gray.500/0.3)] dark:[--inner-border-color:0] dark:[--outline-radial-opacity:0.2] dark:[background-image:none] dark:hover:bg-gray-500/10 dark:active:bg-gray-500/5 dark:disabled:border-none dark:disabled:bg-gray-500/10 dark:disabled:text-gray-700 dark:disabled:shadow-none dark:disabled:[background-image:none]">
<GoogleIcon />
Continue With Google
</button>
</div>
<div class="mb-4 mt-6 grid items-center gap-3 [grid-template-columns:1fr_auto_1fr]">
<span class="bg-gray-200 dark:bg-gray-800 block h-px"></span>
<span class="text-sm text-gray-500">Or</span>
<span class="bg-gray-200 dark:bg-gray-800 block h-px"></span>
</div>
<div class="space-y-6">
<div class="space-y-3 has-[:disabled]:opacity-50">
<label for="email2" class="text-sm text-gray-950 dark:text-white">Username</label>
<input class="h-9 w-full rounded-md border bg-white px-3 text-gray-950 placeholder-gray-400 shadow outline-2 outline-blue-600 invalid:border-red-600 focus:outline focus:invalid:outline-red-600 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-600" type="email" required name="email2" id="email2" />
</div>
<div class="space-y-3 has-[:disabled]:opacity-50">
<div class="flex justify-between">
<label for="pwd" class="text-sm text-gray-950 dark:text-white">Password</label>
<a href="#" class="text-sm text-blue-600 underline dark:text-blue-400">Forgot your Password ?</a>
</div>
<input class="h-9 w-full rounded-md border bg-white px-3 text-gray-950 placeholder-gray-400 shadow outline-2 outline-blue-600 invalid:border-red-600 focus:outline focus:invalid:outline-red-600 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder-gray-600" type="password" required name="pwd" id="pwd" />
</div>
<button class="flex justify-center gap-1.5 items-center rounded-md outline-2 outline-offset-2 focus-visible:outline outline-blue-600 disabled:bg-gray-200 disabled:text-gray-400 disabled:shadow-none disabled:hover:brightness-100 dark:disabled:bg-gray-500/10 dark:disabled:[background-image:none] dark:disabled:text-gray-700 dark:disabled:shadow-none dark:disabled:border-none bg-gradient-to-b [box-shadow:rgba(255,255,255,0.25)_0px_1px_0px_0px_inset,var(--btn-border-color)_0px_0px_0px_1px] text-white hover:brightness-[1.1] transition-[filter] duration-150 ease-in-out active:brightness-95 dark:shadow-inner dark:to-0% dark:border-t dark:shadow-white/10 disabled:from-gray-100 disabled:to-gray-100 from-blue-500 to-blue-600 [--btn-border-color:theme(colors.blue.700)] dark:border-blue-400/75 text-base h-9 px-4 w-full">Sign In</button>
</div>
</div>
<div data-shade="925" class="rounded-2xl bg-gray-100 p-6 dark:bg-gray-950">
<p class="text-center text-sm text-gray-600 dark:text-gray-400">Don't have an account ? <a href="#" class="underlined text-gray-950 dark:text-white">Create account</a></p>
</div>
</form>Built with Customization In Mind
Our pre-built component classes give you the flexibility to make them your own. Whether you need to tweak colors, sizes, or layouts, the TailwindCSS foundation ensures that customization is simple and intuitive.
Learn More@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* Border Radius */
--card-radius: theme(borderRadius.xl);
--btn-radius: var(--card-radius);
--badge-radius: var(--btn-radius);
--input-radius: var(--btn-radius);
--avatar-radius: theme(borderRadius.full);
--annonce-radius: var(--avatar-radius);No Node, Just CSS
No need for extra packages—simply drop in the CSS file and start building. It’s that easy and lightweight.
Perfectly works with TailwindCss Utilities.
Kickstart with pre-built color palettes
Flexible Theme Modes
Choose from light, dark, or a combined mode with our 3 ready-to-use CSS files.
Data Attributes
Use custom data attributes to personalize your entire site or specific components effortlessly.
Build faster with modern UI Blocks
Speed up your workflow with responsive, pre-built UI blocks designed for marketing websites. Perfect for landing pages, product showcases, and portfolios.
Browse Blocks