<section class="relative py-20">
<div class="absolute top-0 left-0 lg:bottom-0 h-112 lg:h-auto w-full lg:w-8/12 bg-gray-500"></div>
<div class="relative container px-4 mx-auto">
<div class="flex flex-wrap items-center -mx-4">
<div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
<div class="max-w-md">
<h2 class="mb-6 text-4xl lg:text-5xl font-bold text-white">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="text-gray-50 lg:pr-10 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
</div>
<div class="w-full lg:w-1/2 px-4">
<div class="lg:max-w-md p-6 bg-gray-50 text-center rounded-lg">
<form action="#">
<span class="text-sm text-gray-500 font-semibold uppercase">Sign Up</span>
<h3 class="mb-8 text-2xl font-bold font-heading">Create new account</h3>
<input class="w-full py-3 pl-3 mb-4 bg-white rounded-lg" type="email" placeholder="E-mail address">
<input class="w-full py-3 pl-3 mb-4 bg-white rounded-lg" type="password" placeholder="Password">
<input class="w-full py-3 pl-3 mb-4 bg-white rounded-lg" type="password" placeholder="Repeat password">
<label class="inline-block mb-4">
<input class="mr-1" type="checkbox" name="terms" value="1">
<span class="text-sm text-gray-500">By signing up, you agree to our <a class="font-bold hover:underline" href="#">Terms, Data Policy</a> and <a class="font-bold hover:underline" href="#">Cookies Policy</a>.</span>
</label>
<button class="w-full inline-block px-6 py-3 mr-4 text-sm text-white font-bold leading-loose bg-gray-500 hover:bg-gray-600 rounded transition duration-200">Get Started</button>
</form>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
