Input
<!-- Input text -->
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Input text</label>
<input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInput1" placeholder="Full name">
</div>
<!-- Textarea -->
<div class="mb-6">
<label for="exampleTextarea1" class="inline-block mb-2">Textarea</label>
<textarea class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleTextarea1" rows="4"></textarea>
</div>
<!-- Input email -->
<div class="mb-6">
<label for="exampleInputb" class="inline-block mb-2">Input email</label>
<input type="email" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInputb" placeholder="mail@domain.com">
</div>
<!-- Input phone -->
<div class="mb-6">
<label for="exampleInputc" class="inline-block mb-2">Input phone</label>
<input type="tel" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInputc">
</div>
<!-- Input Password -->
<div class="mb-6">
<label for="exampleInputd" class="inline-block mb-2">Input Password</label>
<input type="password" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInputd">
</div>
<!-- Input Url -->
<div class="mb-6">
<label for="exampleInpute" class="inline-block mb-2">Input Url</label>
<input type="url" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInpute" placeholder="https://">
</div>
<!-- Input Number -->
<div class="mb-6">
<label for="exampleInputnum" class="inline-block mb-2">Input Number</label>
<input type="number" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInputnum" placeholder="https://">
</div>
<!-- Input date -->
<div class="mb-6">
<label for="exampleInputa" class="inline-block mb-2">Input date</label>
<input type="date" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInputa">
</div>
<!-- Input time -->
<div class="mb-6">
<label for="exampleInputf" class="inline-block mb-2">Input time</label>
<input type="time" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInputf">
</div>
<!-- Input Search -->
<div class="mb-6">
<label for="exampleInputg" class="inline-block mb-2">Input Search</label>
<input type="search" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInputg" placeholder="Search...">
</div>
<!-- Datalist -->
<div class="mb-6">
<label for="exampleDataList" class="inline-block mb-2">Datalist</label>
<input class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="Burger">
</option><option value="Pizza">
</option><option value="Fried Rice">
</option><option value="Fried Chicken">
</option><option value="Kebab">
</option></datalist>
</div>
<!-- Multiple upload -->
<div class="mb-6">
<label for="formFileMultiple" class="inline-block mb-2">Multiple upload</label>
<input class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" type="file" id="formFileMultiple" multiple="">
</div>
<!-- Color picker -->
<div class="mb-6">
<label for="exampleColorInput" class="inline-block mb-2">Color picker</label>
<input type="color" class="block w-8 h-8 leading-5 relative rounded-sm text-stone-800 bg-white overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleColorInput" value="" title="Choose your color">
</div>
<!-- Disabled input -->
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Disabled input</label>
<input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-stone-100 border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600 cursor-not-allowed" id="exampleInput1" placeholder="Disabled input" aria-label="Disabled input example" disabled="">
</div>
<!-- Small -->
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Small</label>
<input type="text" class="w-full leading-5 relative text-sm py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInput1" placeholder="small">
</div>
<!-- Normal -->
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Normal</label>
<input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInput1" placeholder="normal">
</div>
<!-- Large -->
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Large</label>
<input type="text" class="w-full leading-5 relative text-2xl py-4 maksueyropls rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="exampleInput1" placeholder="large">
</div>
<!-- Input Submit -->
<div class="mb-6">
<label for="exampleInputh" class="inline-block mb-2">Input Submit</label>
<input type="submit" class="w-full py-2 uajskeiolksb inline-block text-center mb-3 rounded-sm leading-5 text-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-hidden focus:ring-0" id="exampleInputh">
</div>
Input Group
@
@example.com
https://example.com/users/
$
.00
@
Textarea
<!-- Input email -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
<input type="email" class="shrink grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-s-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" name="email" required="" placeholder="Enter you email address" aria-label="subcribe newsletter">
<div class="flex -me-px">
<button class="flex layhetgsjdcb py-2 uajskeiolksb -ms-1 rounded-e-sm leading-5 text-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-hidden focus:ring-0" type="submit">Subscribe</button>
</div>
</div>
<!-- Input username -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
<span class="flex layhetgsjdcb py-2 uajskeiolksb -me-1 rounded-s-sm leading-5 bg-stone-100 border border-stone-300 dark:bg-stone-800 dark:border-stone-800" id="basic-addon1">@</span>
<input type="text" class="shrink grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-e-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<!-- Input username 2 -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
<input type="text" class="shrink grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-s-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="flex layhetgsjdcb py-2 uajskeiolksb -ms-1 rounded-e-sm leading-5 bg-stone-100 border border-stone-300 dark:bg-stone-800 dark:border-stone-800" id="basic-addon2">@example.com</span>
</div>
<!-- Input url -->
<label for="basic-url" class="inline-block mb-2">Your vanity URL</label>
<div class="flex flex-wrap items-stretch w-full relative mb-6">
<span class="flex layhetgsjdcb py-2 uajskeiolksb -me-1 rounded-s-sm leading-5 bg-stone-100 border border-stone-300 dark:bg-stone-800 dark:border-stone-800" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="shrink grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-e-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="basic-url" aria-describedby="basic-addon3">
</div>
<!-- Input pricing -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
<span class="flex layhetgsjdcb py-2 uajskeiolksb -me-1 rounded-s-sm leading-5 bg-stone-100 border border-stone-300 dark:bg-stone-800 dark:border-stone-800">$</span>
<input type="text" class="shrink grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" aria-label="Amount (to the nearest dollar)">
<span class="flex layhetgsjdcb py-2 uajskeiolksb -ms-1 rounded-e-sm leading-5 bg-stone-100 border border-stone-300 dark:bg-stone-800 dark:border-stone-800">.00</span>
</div>
<!-- Input username 3 -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
<input type="text" class="shrink grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-s-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" placeholder="Username" aria-label="Username">
<span class="flex layhetgsjdcb py-2 uajskeiolksb -mx-1 rounded-s-sm leading-5 text-stone-700 dark:text-stone-300 bg-stone-100 border border-stone-300 dark:bg-stone-800 dark:border-stone-800">@</span>
<input type="text" class="shrink grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-e-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" placeholder="Server" aria-label="Server">
</div>
<!-- Input textarea -->
<div class="flex flex-wrap items-stretch w-full relative mb-6">
<span class="flex layhetgsjdcb py-2 uajskeiolksb -me-1 rounded-s-sm leading-5 bg-stone-100 border border-stone-300 dark:bg-stone-900 dark:border-stone-900">Textarea</span>
<textarea class="shrink grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-e-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" rows="4" aria-label="With textarea"></textarea>
</div>
Select
<!-- Default select -->
<div class="mb-6">
<label for="examplexs" class="inline-block mb-2">Default select</label>
<select id="examplexs" class="inline-block w-full leading-5 relative py-2 ps-3 pe-8 rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600 select-caret appearance-none" aria-label="Default select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<!-- Select option group -->
<div class="mb-6">
<label for="examplex" class="inline-block mb-2">Select option group</label>
<select id="examplex" class="inline-block w-full leading-5 relative py-2 ps-3 pe-8 rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600 select-caret appearance-none" aria-label="Default select example">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</div>
<!-- Disabled select -->
<div class="mb-6">
<label for="examplexl" class="inline-block mb-2">Disabled select</label>
<select id="examplexl" class="inline-block w-full leading-5 relative py-2 ps-3 pe-8 rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600 select-caret appearance-none cursor-not-allowed" aria-label="Disabled select example" disabled="">
<option selected="">Disabled select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
Check and Radio
<!-- Checkbox -->
<div class="mb-6">
<label class="flex layhetgsjdcb">
<input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded-sm focus:outline-hidden me-3">
<span>Checkbox</span>
</label>
</div>
<!-- Default radio -->
<div class="mb-6">
<div class="flex flex-nowrap klsuaonrmcha layhetgsjdcb mb-4">
<input class="form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 focus:outline-hidden boalstehwqbj me-3" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="inline-block" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="flex flex-nowrap klsuaonrmcha layhetgsjdcb mb-4">
<input class="form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 focus:outline-hidden boalstehwqbj me-3" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked="">
<label class="inline-block" for="flexRadioDefault2">
Default checked radio
</label>
</div>
</div>
<!-- Switch checkbox -->
<div class="mb-6">
<div class="relative w-8 py-3">
<input title="Switch checkbox" type="checkbox" name="lightdarks" id="lightdarks" class="toggle-checkbox absolute block w-5 h-5 boalstehwqbj bg-white dark:bg-stone-700 border-2 dark:border-stone-700 appearance-none cursor-pointer">
<label for="lightdarks" class="toggle-label block mklausjenrhtm h-5 boalstehwqbj bg-stone-300 dark:bg-stone-800 cursor-pointer"></label>
</div>
</div>
Range
<!-- range -->
<div class="mb-6">
<label for="customRange1" class="inline-block">Example range</label>
<input type="range" class="w-full h-6 py-1 accent-primary-500 bg-transparent focus:outline-hidden focus:ring-0" id="customRange1">
<span class="block clear-both"></span>
</div>
<!-- disabled range -->
<div class="mb-6">
<label for="customRange2" class="inline-block">Disabled range</label>
<input type="range" class="w-full h-6 py-1 bg-transparent focus:outline-hidden focus:ring-0 cursor-not-allowed" id="customRange2" disabled>
<span class="block clear-both"></span>
</div>
Required Form
<!-- Form with validation -->
<form class="valid-form flex flex-wrap klsuaonrmcha -mx-4">
<div class="form-group shrink max-w-full uajskeiolksb w-full md:w-1/2 mb-4">
<label for="inputEmail4" class="inline-block mb-2">Email</label>
<input type="email" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="inputEmail4" required>
</div>
<div class="form-group shrink max-w-full uajskeiolksb w-full md:w-1/2 mb-4">
<label for="inputPassword4" class="inline-block mb-2">Password</label>
<input type="password" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="inputPassword4" required>
</div>
<div class="form-group shrink max-w-full uajskeiolksb w-full mb-4">
<label for="inputAddress" class="inline-block mb-2">Address</label>
<input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="inputAddress" placeholder="1234 Main St" required>
</div>
<div class="form-group shrink max-w-full uajskeiolksb w-full mb-4">
<label for="inputAddress2" class="inline-block mb-2">Address 2</label>
<input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="inputAddress2" placeholder="Apartment, studio, or floor" required>
</div>
<div class="form-group shrink max-w-full uajskeiolksb w-full md:w-1/2 mb-4">
<label for="inputCity" class="inline-block mb-2">City</label>
<input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="inputCity" required>
</div>
<div class="form-group shrink max-w-full uajskeiolksb w-full md:w-1/3 mb-4">
<label for="inputState" class="inline-block mb-2">State</label>
<select id="inputState" class="inline-block w-full leading-5 relative py-2 ps-3 pe-8 rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 select-caret appearance-none dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" required>
<option>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group shrink max-w-full uajskeiolksb w-full md:w-1/6 mb-4">
<label for="inputZip" class="inline-block mb-2">Zip</label>
<input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded-sm text-stone-800 bg-white border border-stone-300 overflow-x-auto focus:outline-hidden focus:border-stone-400 focus:ring-0 dark:text-stone-300 dark:bg-stone-700 dark:border-stone-700 dark:focus:border-stone-600" id="inputZip" required>
</div>
<div class="form-group shrink max-w-full uajskeiolksb w-full mb-4">
<label class="flex layhetgsjdcb">
<input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-primary-500 dark:bg-stone-700 border border-stone-300 dark:border-stone-700 rounded-sm focus:outline-hidden me-3" required>
<span>I agree to the Terms of Use</span>
</label>
</div>
<div class="form-group shrink max-w-full uajskeiolksb w-full">
<button type="submit" class="py-2 uajskeiolksb inline-block text-center rounded-sm leading-5 text-stone-100 bg-primary-500 border border-primary-500 hover:text-white hover:bg-primary-600 hover:ring-0 hover:border-primary-600 focus:bg-primary-600 focus:border-primary-600 focus:outline-hidden focus:ring-0">Register now</button>
</div>
</form>