The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="relative py-16">
<div class="container relative m-auto px-6 text-gray-500 md:px-12 xl:px-40">
<div class="m-auto md:w-8/12 lg:w-6/12 xl:w-6/12">
<div class="rounded-3xl border border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 dark:shadow-none">
<div class="p-8 py-12 sm:p-16">
<div class="space-y-4">
<img src="images/icon.svg" loading="lazy" class="w-10" alt="tailus logo" />
<h2 class="mb-8 text-2xl font-bold text-gray-800 dark:text-white">
Sign in to unlock the <br />
best of Tailus.
</h2>
</div>
<div class="mt-16 grid space-y-4">
<button class="group relative flex h-11 items-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-white dark:before:bg-gray-700 dark:before:border-gray-600 before:border before:border-gray-200 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 disabled:before:bg-gray-300 disabled:before:scale-100">
<span class="w-full relative flex justify-center items-center gap-3 text-base font-medium text-gray-600 dark:text-gray-200">
<img src="images/google.svg" class="absolute left-0 w-5" alt="google logo" />
<span>Continue with Google</span>
</span>
</button>
<button class="group relative flex h-11 items-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-white dark:before:bg-gray-700 dark:before:border-gray-600 before:border before:border-gray-200 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 disabled:before:bg-gray-300 disabled:before:scale-100">
<span class="w-full relative flex justify-center items-center gap-3 text-base font-medium text-gray-600 dark:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 absolute left-0" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
<span>Continue with Facebook</span>
</span>
</button>
<button class="group relative flex h-11 items-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-white dark:before:bg-gray-700 dark:before:border-gray-600 before:border before:border-gray-200 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 disabled:before:bg-gray-300 disabled:before:scale-100">
<span class="w-full relative flex justify-center items-center gap-3 text-base font-medium text-gray-600 dark:text-gray-200">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="w-5 h-5 absolute left-0"
viewBox="0 0 16 16"
>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
/>
</svg>
<span>Continue with Github</span>
</span>
</button>
</div>
<div class="mt-32 space-y-4 text-center text-gray-600 dark:text-gray-400 sm:-mb-8">
<p class="text-xs">
By proceeding, you agree to our <a href="#" class="underline">Terms of Use</a> and
confirm you have read our
<a href="#" class="underline">Privacy and Cookie Statement</a>.
</p>
<p class="text-xs">
This site is protected by reCAPTCHA and the
<a href="#" class="underline">Google Privacy Policy</a> and
<a href="#" class="underline">Terms of Service</a> apply.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="m-auto xl:container px-12 sm:px-0 mx-auto">
<div class="mx-auto h-full sm:w-max">
<div class="m-auto py-12">
<div class="space-y-4">
<a href="">
<img src="images/tailus.svg" class="w-40 dark:hidden" alt="tailus logo" />
<img src="images/logo.svg" class="w-40 hidden dark:block" alt="tailus logo" />
</a>
</div>
<div class="mt-12 rounded-3xl border bg-gray-50 dark:border-gray-700 dark:bg-gray-800 -mx-6 sm:-mx-10 p-8 sm:p-10">
<h3 class="text-2xl font-semibold text-gray-700 dark:text-white">Login to your account</h3>
<div class="mt-12 flex flex-wrap sm:grid gap-6 grid-cols-2">
<button
class="w-full h-11 rounded-full border border-gray-300/75 bg-white px-6 transition active:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-800 dark:hover:border-gray-700"
>
<div class="w-max mx-auto flex items-center justify-center space-x-4">
<img src="images/google.svg" class="w-5" alt="" />
<span class="block w-max text-sm font-semibold tracking-wide text-cyan-700 dark:text-white"
>With Google</span
>
</div>
</button>
<button
class="w-full h-11 rounded-full bg-gray-900 px-6 transition hover:bg-gray-800 focus:bg-gray-700 active:bg-gray-600 dark:bg-gray-700 dark:border dark:border-gray-600 dark:hover:bg-gray-800 dark:hover:border-gray-700"
>
<div class="w-max mx-auto flex items-center justify-center space-x-4 text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="w-5"
viewBox="0 0 16 16"
>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
/>
</svg>
<span class="block w-max text-sm font-semibold tracking-wide text-white"
>With Github</span
>
</div>
</button>
</div>
<form action="" class="mt-10 space-y-8 dark:text-white">
<div>
<div class="relative before:absolute before:bottom-0 before:h-0.5 before:left-0 before:origin-right focus-within:before:origin-left before:right-0 before:scale-x-0 before:m-auto before:bg-sky-400 dark:before:bg-sky-800 focus-within:before:!scale-x-100 focus-within:invalid:before:bg-red-400 before:transition before:duration-300">
<input id="" type="email" placeholder="Your email or user name" class="w-full bg-transparent pb-3 border-b border-gray-300 dark:placeholder-gray-300 dark:border-gray-600 outline-none invalid:border-red-400 transition">
</div>
</div>
<div class="flex flex-col items-end">
<div class="w-full relative before:absolute before:bottom-0 before:h-0.5 before:left-0 before:origin-right focus-within:before:origin-left before:right-0 before:scale-x-0 before:m-auto before:bg-sky-400 dark:before:bg-sky-800 focus-within:before:!scale-x-100 focus-within:invalid:before:bg-red-400 before:transition before:duration-300">
<input id="" type="Your password" placeholder="Your answer" class="w-full bg-transparent pb-3 border-b border-gray-300 dark:placeholder-gray-300 dark:border-gray-600 outline-none invalid:border-red-400 transition">
</div>
<button type="reset" class="-mr-3 w-max p-3">
<span class="text-sm tracking-wide text-sky-600 dark:text-sky-400">Forgot password ?</span>
</button>
</div>
<div>
<button
class="w-full rounded-full bg-sky-500 dark:bg-sky-400 h-11 flex items-center justify-center px-6 py-3 transition hover:bg-sky-600 focus:bg-sky-600 active:bg-sky-800"
>
<span class="text-base font-semibold text-white dark:text-gray-900">Login</span>
</button>
<button href="#" type="reset" class="-ml-3 w-max p-3">
<span class="text-sm tracking-wide text-sky-600 dark:text-sky-400">Create new account</span>
</button>
</div>
</form>
</div>
<div class="border-t pt-12 text-gray-500 dark:border-gray-800">
<div class="space-x-4 text-center">
<span>© Tailus</span>
<a href="#" class="text-sm hover:text-sky-900 dark:hover:text-gray-300">Contact</a>
<a href="#" class="text-sm hover:text-sky-900 dark:hover:text-gray-300">Privacy & Terms</a>
</div>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<body class="min-h-screen flex flex-col justify-center bg-white dark:bg-gray-900">
<div class="relative sm:py-16">
<div aria-hidden="true" class="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40 transition duration-300 delay-0">
<div class="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400 dark:from-blue-700"></div>
<div class="blur-[106px] h-32 bg-gradient-to-r from-pink-400 to-yellow-300"></div>
</div>
<div class="relative xl:container m-auto px-6 text-gray-500 md:px-12">
<div class="m-auto space-y-8 sm:w-4/5 md:w-3/5 xl:w-2/5">
<div class="p-8 md:py-12">
<img src="images/icon.svg" loading="lazy" class="w-10" alt="tailus logo" />
<h2 class="mt-20 mb-8 text-3xl font-bold text-gray-800 dark:text-white">Welcome back to Tailus.</h2>
<form action="" class="space-y-8">
<div class="space-y-4">
<label for="username" class="text-gray-600 dark:text-gray-300">What's your phone number or email ?</label>
<div class="relative flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 absolute left-4 inset-y-0 my-auto">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
<input
type="text"
name="username"
id="username"
autocomplete="username"
placeholder="Phone number or email"
class="focus:outline-none block w-full rounded-full placeholder-gray-500 bg-gray-100 dark:bg-gray-800 dark:border-gray-600 pl-12 pr-4 h-12 text-gray-600 transition duration-300 invalid:ring-2 invalid:ring-red-400 focus:ring-2 focus:ring-primary"
/>
<div class="absolute right-1">
<button type="submit" class="relative flex h-10 w-10 sm:w-max ml-auto items-center justify-center sm:px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="hidden relative text-base font-semibold text-white dark:text-gray-900 sm:block">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="relative w-5 h-5 text-white dark:text-gray-900 sm:hidden">
<path fill-rule="evenodd" d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
<p class="text-gray-500 text-sm">By proceeding, you consent to get calls, WhatsApp or SMS messages, including by automated means, from Tailus and its affiliates to the number provided.</p>
<p class="border-t border-gray-100 dark:border-gray-700 pt-6 text-sm text-gray-500 dark:text-gray-400">
Don't have an account ?
<a href="#" class="text-primary">Sign up</a>
</p>
</form>
</div>
</div>
</div>
</div>
</body>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="relative py-16">
<div class="container relative m-auto px-6 text-gray-500 md:px-12 xl:px-40">
<div class="m-auto space-y-8 md:w-8/12 lg:w-6/12 xl:w-6/12">
<img src="images/tailus.svg" loading="lazy" class="ml-4 w-36" alt="tailus logo" />
<div class="rounded-3xl border border-gray-100 bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 backdrop-blur-2xl">
<div class="p-8 py-12 sm:p-16">
<h2 class="mb-8 text-2xl font-bold text-gray-800 dark:text-white">Sign in to your account</h2>
<form action="" class="space-y-8">
<div class="space-y-2">
<label for="email" class="text-gray-600 dark:text-gray-300">Email</label>
<input
type="email"
name="email"
id="email"
autocomplete="username"
class="focus:outline-none block w-full rounded-md border border-gray-200 dark:border-gray-600 bg-transparent px-4 py-3 text-gray-600 transition duration-300 invalid:ring-2 invalid:ring-red-400 focus:ring-2 focus:ring-cyan-300"
/>
</div>
<div>
<div class="flex items-center justify-between">
<label for="pwd" class="text-gray-600 dark:text-gray-300">Password</label>
<button class="-mr-2 p-2" type="reset">
<span class="text-sm text-primary">Forgot your password ?</span>
</button>
</div>
<input
type="password"
name="pwd"
id="pwd"
autocomplete="current-password"
class="focus:outline-none block w-full rounded-md border border-gray-200 dark:border-gray-600 bg-transparent px-4 py-3 text-gray-600 transition duration-300 invalid:ring-2 invalid:ring-red-400 focus:ring-2 focus:ring-cyan-300"
/>
</div>
<button type="submit" class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-white dark:text-dark">Connect</span>
</button>
<p class="border-t border-gray-100 dark:border-gray-700 pt-6 text-sm text-gray-500 dark:text-gray-400">
Don't have an account ?
<a href="#" class="text-primary">Sign up</a>
</p>
</form>
</div>
</div>
<div class="space-x-4 text-center text-gray-500">
<span>© tailus</span>
<a href="#" class="text-sm hover:text-primary">Contact</a>
<a href="#" class="text-sm hover:text-primary">Privacy & Terms</a>
</div>
</div>
</div>
</div>