<div class="h-screen flex items-center">
<div
class="container max-w-md mx-auto xl:max-w-3xl flex bg-white rounded-lg shadow overflow-hidden flex"
>
<div class="relative hidden xl:block xl:w-1/2 h-full">
<img
class="absolute h-auto w-full object-cover"
src="https://images.unsplash.com/photo-1541233349642-6e425fe6190e"
alt="my zomato"
/>
</div>
<div class="w-full xl:w-1/2 p-8">
<form @submit.prevent="">
<h1 class=" text-2xl font-bold">Create an account</h1>
<div class="mb-4 mt-6">
<label
class="block text-gray-700 text-sm font-semibold mb-2"
htmlFor="email"
>
Email
</label>
<input
id="email"
class="text-sm appearance-none rounded w-full py-2 px-3 text-gray-700 bg-gray-200 leading-tight focus:outline-none focus:shadow-outline h-10"
type="text"
placeholder="Your email address"
/>
</div>
<div class="mb-6 mt-6">
<label
class="block text-gray-700 text-sm font-semibold mb-2"
htmlFor="password"
>
Password
</label>
<input
id="password"
class="text-sm bg-gray-200 appearance-none rounded w-full py-2 px-3 text-gray-700 mb-1 leading-tight focus:outline-none focus:shadow-outline h-10"
type="password"
placeholder="Your password"
/>
</div>
<div class="flex w-full mt-8">
<button
class="w-full bg-gray-800 hover:bg-grey-900 text-white text-sm py-2 px-4 font-semibold rounded focus:outline-none focus:shadow-outline h-10"
>
Create Account
</button>
</div>
</form>
</div>
</div>
</div>