<div class="bg-gray-100 p-4 lg:p-8 lg:h-screen">
<div class="container mx-auto p-2 lg:p-4 h-full bg-white shadow rounded-lg">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-2 h-full">
<div
class="hidden lg:flex bg-indigo-600 rounded-md flex-col justify-between items-start relative p-8 overflow-hidden">
<div>
<h3 class="uppercase tracking-wider font-bold absolute top-8 left-8 text-white">DRYCOMPONENTS</h3>
<h1 class="font-black text-white text-5xl mt-16">Start your <span class="block">journey with
us.</span></h1>
<p class="text-gray-200 text-xl md:w-3/5 mt-4">Discover the world best community of freelancers and
business owners</p>
</div>
<div>
<div class="bg-indigo-500 bg-opacity-70 p-4 rounded-md mb-4">
<div class="relative">
<img class="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1474176857210-7287d38d27c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1">
<div class="pl-16 text-white">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p class="py-8 text-gray-200 leading-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quo beatae, sit officiis
tempora aliquam unde nihil atque corrupti quaerat, quisquam exercitationem placeat aliquid
in at praesentium ipsa dicta laboriosam.
</p>
<span class="text-gray-300">23rd April, 2022</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mx-auto text-xl text-gray-200 tracking-widest" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</div>
</div>
<div class="p-4 h-full flex flex-row justify-center items-center">
<div class="w-full lg:w-4/5 mx-auto">
<h2 class="mt-6 text-3xl font-extrabold text-gray-900">Sign up to create account</h2>
<p class="mt-2 text-sm text-gray-600">
Or
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500"> login with existing account
</a>
</p>
<form action="" method="POST" class="mt-16">
<div class="mb-4">
<label class="mb-1 block text-gray-500" for="name">Name*</label>
<input type="text" name="name" id="name" placeholder="Enter your name.." class="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12">
</div>
<div class="mb-4">
<label class="mb-1 block text-gray-500" for="email">Email Address*</label>
<input type="email" name="email" id="email" placeholder="Enter your email address.." class="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12">
</div>
<div class="mb-4">
<label class="mb-1 block text-gray-500" for="password">Password*</label>
<input type="password" name="password" id="password" placeholder="Enter your password.." class="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12">
</div>
<div class="mb-4">
<label class="mb-1 block text-gray-500" for="password">Confirm Password*</label>
<input type="password" name="password" id="password" placeholder="Enter your password.." class="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12">
</div>
<div class="py-8">
<button type="submit"
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Sign Up
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
const Register = () => {
return (
<div className="bg-gray-100 p-4 lg:p-8 lg:h-screen">
<div className="container mx-auto p-2 lg:p-4 h-full bg-white shadow rounded-lg">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2 h-full">
<div className="hidden lg:flex bg-indigo-600 rounded-md flex-col justify-between items-start relative p-8 overflow-hidden">
<div>
<h3 className="uppercase tracking-wider font-bold absolute top-8 left-8 text-white">
DRYCOMPONENTS
</h3>
<h1 className="font-black text-white text-5xl mt-16">
Start your{" "}
<span className="block">journey with us.</span>
</h1>
<p className="text-gray-200 text-xl md:w-3/5 mt-4">
Discover the world best community of freelancers
and business owners
</p>
</div>
<div>
<div className="bg-indigo-500 bg-opacity-70 p-4 rounded-md mb-4">
<div className="relative">
<img
className="w-12 h-12 absolute top-0 left-0 rounded-md object-cover"
src="https://images.unsplash.com/photo-1474176857210-7287d38d27c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMGZhY2VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
alt="user-1"
/>
<div className="pl-16 text-white">
<h3>John Doe</h3>
<span>@johndoe</span>
</div>
</div>
<p className="py-8 text-gray-200 leading-6">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati quo beatae, sit
officiis tempora aliquam unde nihil atque
corrupti quaerat, quisquam exercitationem
placeat aliquid in at praesentium ipsa dicta
laboriosam.
</p>
<span className="text-gray-300">
23rd April, 2022
</span>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 mx-auto text-xl text-gray-200 tracking-widest"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</div>
</div>
<div className="p-4 h-full flex flex-row justify-center items-center">
<div className="w-full lg:w-4/5 mx-auto">
<h2 className="mt-6 text-3xl font-extrabold text-gray-900">
Sign up to create account
</h2>
<p className="mt-2 text-sm text-gray-600">
Or
<a
href="#"
className="font-medium text-indigo-600 hover:text-indigo-500"
>
{" "}
login with existing account
</a>
</p>
<form action method="POST" className="mt-16">
<div className="mb-4">
<label
className="mb-1 block text-gray-500"
htmlFor="name"
>
Name*
</label>
<input
type="text"
name="name"
id="name"
placeholder="Enter your name.."
className="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12"
/>
</div>
<div className="mb-4">
<label
className="mb-1 block text-gray-500"
htmlFor="email"
>
Email Address*
</label>
<input
type="email"
name="email"
id="email"
placeholder="Enter your email address.."
className="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12"
/>
</div>
<div className="mb-4">
<label
className="mb-1 block text-gray-500"
htmlFor="password"
>
Password*
</label>
<input
type="password"
name="password"
id="password"
placeholder="Enter your password.."
className="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12"
/>
</div>
<div className="mb-4">
<label
className="mb-1 block text-gray-500"
htmlFor="password"
>
Confirm Password*
</label>
<input
type="password"
name="password"
id="password"
placeholder="Enter your password.."
className="w-full bg-white px-5 py-6 border border-gray-200 rounded-md h-12"
/>
</div>
<div className="py-8">
<button
type="submit"
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Sign Up
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
export default Register;