Responsive Form Signup - Tailwind Component
This a form signup in two column, it is made with Tailwind CSS.
forms
Loading component...
88 lines
<div class="flex lg:flex-row flex-col w-full mx-auto bg-white min-h-screen">
<div class="relative lg:block hidden w-full lg:w-1/3 md:px-16 items-center bg-blue-500 ">
<h1 class="text-3xl sm:text-4xl font-medium py-8 text-gray-100 pt-14">
Welcome to <span class="font-bold line-through">Rookie</span>
</h1>
<p class="text-gray-300">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quibusdam, veritatis tenetur itaque amet cumquelibero
</p>
<div class="mt-4">
<h2 class="text-gray-200 font-semibold text-2xl">Lorem ipsum dolor sit?</h2>
<ul class="list-disc text-gray-300 mt-3">
<li>Now this is a story all about how, my life got flipped turned upside down</li>
<li>Now this is a story all about how, my life got flipped turned upside down</li>
</ul>
</div>
</div>
<div class="w-full lg:w-2/3 mt-4 lg:mt-0 space-y-4 px-4 sm:px-16 md:px-32 lg:px-0 xl:mx-24 lg:mx-0 items-center">
<div class="px-2 py-4 bg-white w-4/5 sm:max-w-md sm:px-5 mx-auto pt-14">
<div class="flex-1 px-2">
<h3 class=" text-black text-2xl font-semibold">Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
<form action="#" class="my-4">
<label for="email" class="block">
<div class='my-3 flex flex-wrap -m-1'>
<span class="block font-medium m-1 text-gray-700 hover:border-b hover:border-gray-800">Telepon</span>
<span class="block font-medium m-1 text-gray-700 border-b border-gray-800">Email</span>
</div>
<input type="email" id="email" placeholder="Input email..." class="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500
focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm
invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 peer">
<p class="text-xs m-1 text-pink-700 invisible peer-invalid:visible">Invalid email</p>
</label>
<label for="password" class="block">
<span class="block font-medium m-1 text-gray-700">Password</span>
<input type="password" id="password" placeholder="Input password..." minlength="5" class="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500
focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm
invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 peer">
<p class="text-xs m-1 text-pink-700 invisible peer-invalid:visible">less than 5 characters</p>
</label>
<label for="code" class="block">
<span class="block font-medium m-1 text-gray-700 hover:border-b">Referral code
(Optional)</span>
<input type="text" id="code" placeholder="Input referral code..."
class="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm">
</label>
<button type="button"
class="w-full inline-flex mb-4 items-center justify-center text-gray-100 font-medium leading-none mt-8 bg-blue-600 rounded-lg py-3 px-8 border border-transparent transform-gpu hover:-translate-y-0.5 transition-all duration-150 hover:text-gray-200 hover:bg-blue-700 text-sm sm:text-base">
Create account
</button>
<small>By registering, I agree to <span class="line-through font-bold">Rookie</span> <span
class="font-semibold underline">Terms of service</span> and <span class="font-semibold underline">Privacy
policy</span>.</small>
<div class="flex mt-7 items-center text-center">
<hr class="border-gray-300 border-1 w-full rounded-md">
<label class="block font-medium text-sm text-gray-600 w-full">
Or register with
</label>
<hr class="border-gray-300 border-1 w-full rounded-md">
</div>
<div class="flex mt-7 justify-center w-full">
<button
class="w-1/2 inline-flex items-center mr-2 sm:mr-5 bg-white justify-center border text-sm sm:text-base border-blue-500 px-4 py-2 rounded cursor-pointer text-gray-700 transition duration-500 ease-in-out transform hover:-translate-x hover:scale-105">
<img src="https://cdn-icons-png.flaticon.com/128/2111/2111644.png" alt="Telegram Icon" class="w-4 sm:w-6 mr-2 sm:mr-4">
Telegram
</button>
<button
class="w-1/2 inline-flex items-center bg-white border justify-center text-sm sm:text-base border-red-500 px-4 py-2 rounded cursor-pointer text-gray-700 transition duration-500 ease-in-out transform hover:-translate-x hover:scale-105">
<img src="https://cdn-icons-png.flaticon.com/128/300/300221.png" alt="Google Icon" class="w-4 sm:w-6 mr-2 sm:mr-4">
Google
</button>
</div>
<div class="mt-7">
<div class="flex justify-center items-center cursor-pointer hover:text-blue-600">
<label class="mr-2 text-center text-sm sm:text-base">Log in to an existing account</label>
</div>
</div>
</form>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>