Card

<div class="card variant-outlined max-w-xs" data-shade="900">
    <span class="text-caption text-xs">Great UX</span>
    <h3 class="mt-2 text-title text-sm font-medium">Realtime insights</h3>
    <p class="text-sm mt-3">Provident fugit vero voluptate. dolores voluptates inventore nisi.</p>

    <div class="mt-16">
        <div class="text-caption text-xs">Loading 60%</div>
        <div class="mt-3 progress sz-sm relative">
            <div class="progress-indicator bg-gradient-to-r from-primary-600 to-accent-500 w-[60%]"></div>
        </div>
        <div class="w-[60%] blur-sm h-6 bg-gradient-to-b from-accent-500/10 to-transparent"></div>
    </div>
</div>

<div class="card variant-soft max-w-xs" data-shade="900">
    <span class="text-caption text-xs">Great UX</span>
    <h3 class="mt-2 text-title text-sm font-medium">Realtime insights</h3>
    <p class="text-sm mt-3">Provident fugit vero voluptate. dolores voluptates inventore nisi.</p>

    <div class="mt-16">
        <div class="text-caption text-xs">Loading 60%</div>
        <div class="mt-3 progress sz-sm relative">
            <div class="progress-indicator bg-gradient-to-r from-primary-600 to-accent-500 w-[60%]"></div>
        </div>
        <div class="w-[60%] blur-sm h-6 bg-gradient-to-b from-accent-500/10 to-transparent"></div>
    </div>
</div>

<form action="" class="card variant-mixed p-1 w-full max-w-sm">
    <div class="p-8">
        <div>
            <h2 class="mb-1 font-semibold text-title text-xl">Sign In to Tailus UI</h2>
            <p class="text-sm">Welcome back! Sign in to continue</p>
        </div>

        <div class="mt-6 grid grid-cols-2 gap-3">
            <button class="btn sz-sm variant-outlined intent-gray">
                <svg xmlns="http://www.w3.org/2000/svg" width="0.98em" height="1em" viewBox="0 0 256 262">
                    <path fill="#4285f4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"></path>
                    <path fill="#34a853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"></path>
                    <path fill="#fbbc05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"></path>
                    <path fill="#eb4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"></path>
                </svg>
                Google
            </button>
            <button class="btn sz-sm variant-outlined intent-gray">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
                    <path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
                    <path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
                    <path fill="#00adef" d="M121.663 256.002H0V134.336h121.663z"></path>
                    <path fill="#fbbc09" d="M256 256.002H134.335V134.336H256z"></path>
                </svg>
                Microsoft
            </button>
        </div>

        <div class="my-8 grid gap-3 items-center [grid-template-columns:1fr_auto_1fr]">
            <span class="separator"></span>
            <span class="text-sm text-caption">Or</span>
            <span class="separator"></span>
        </div>

        <div class="space-y-6">
            <div class="field">
                <label for="email2" class="text-title text-sm">Username</label>
                <input type="email" required name="email2" id="email2" class="input sz-md variant-mixed" />
            </div>

            <div class="field">
                <div class="flex justify-between">
                    <label for="pwd" class="text-title text-sm">Password</label>
                    <a href="#" class="link intent-info text-sm variant-ghost">Forgot your Password ?</a>
                </div>
                <input type="password" required name="pwd" id="pwd" class="input sz-md variant-mixed" />
            </div>

            <button class="btn variant-solid intent-primary sz-md w-full">Sign In</button>
        </div>
    </div>

    <div data-shade="925" class="card variant-soft dark:!bg-[--ui-bg] rounded-[calc(var(--card-radius)-4px)]">
        <p class="text-sm text-center">Don't have an account ?<a href="#" class="link intent-neutral variant-underlined">Create account</a></p>
    </div>