tailgrids
Version:
Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.
69 lines (66 loc) • 3.11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form | TailGrids</title>
<link rel="shortcut icon" href="../../assets/images/favicon.svg" type="image/x-icon" />
<link rel="stylesheet" href="../../assets/css/tailwind.css" />
</head>
<body>
<!-- ====== Forms Section Start -->
<section class="relative z-10 bg-white py-20 lg:py-[120px] dark:bg-dark">
<div class="container mx-auto">
<div class="overflow-hidden rounded-xl bg-[#F0F4FF] dark:bg-dark-2">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 lg:w-1/2">
<div class="relative z-10 px-8 py-10 sm:p-14 lg:pb-24">
<h2 class="mb-6 text-3xl font-semibold text-white sm:text-4xl md:text-[40px]/[48px]">
Start Building <br />
for Free
</h2>
<p class="max-w-[300px] text-base text-white">
And because your company is unique, you will need an
extensible identity solution.
</p>
<div>
<span class="absolute bottom-0 left-0 z-[-1]">
<svg width="585" height="400" viewBox="0 0 585 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M585 -6H0V400C168.393 400 570.581 310.231 585 -6Z" fill="#3056D3" />
</svg>
</span>
<span class="absolute bottom-0 left-0 z-[-2]">
<svg width="392" height="189" viewBox="0 0 392 189" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M391.516 189H0V28C301.088 -64.8 386.464 96.6667 391.516 189Z" fill="#13C296" />
</svg>
</span>
</div>
</div>
</div>
<div class="w-full self-center px-4 lg:w-1/2">
<div class="relative z-10 px-6 py-9 sm:p-10">
<h2 class="mb-6 text-3xl font-semibold text-dark sm:text-4xl dark:text-white">
Subscribe Now
</h2>
<form class="flex flex-wrap pb-1">
<input type="email"
class="mb-3 mr-3 h-[50px] w-full max-w-[220px] rounded-md border border-stroke bg-white px-5 text-sm text-body-color outline-hidden focus:border-primary md:max-w-[315px] lg:max-w-[250px] xl:max-w-[315px] dark:border-dark-3 dark:bg-dark dark:text-dark-6"
placeholder="Your work mail" />
<button
class="mb-3 h-[50px] rounded-md border border-transparent bg-primary px-7 text-base font-medium text-white transition hover:bg-primary/90">
Submit
</button>
</form>
<p class="text-sm text-body-color dark:text-dark-6">
You will receive every news and pro tips.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Forms Section End -->
</body>
</html>