A web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields.
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 pb-24 mx-auto lg:px-4">
<div class="flex flex-col w-full p-8 mx-auto mt-10 border rounded-lg lg:w-2/6 md:w-1/2 md:ml-auto md:mt-0">
<div class="relative ">
<input type="email" id="email" name="email" placeholder="email"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<button
class="px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
<p class="mx-auto mt-3 text-xs text-gray-500">Literally you probably haven't heard of them jean shorts.</p>
</div>
</div>
</section>
WICKEDTEMPLATES
"Free & premium Well designed landing pages to integrate with your next project."
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 pb-24 mx-auto lg:px-4">
<div
class="flex flex-col w-full p-8 mx-auto mt-10 border rounded-lg lg:w-2/6 md:w-1/2 md:ml-auto md:mt-0">
<div class="relative ">
<input type="email" id="email" name="email" placeholder="Password"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative ">
<input type="email" id="email" name="email" placeholder="email"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="flex my-4">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox">
<span class="ml-2">Subscribe me </span>
</label>
</div>
<button
class="px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
<p class="mx-auto mt-3 text-xs text-gray-500">Literally you probably haven't heard of them jean
shorts.</p>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 pb-24 mx-auto lg:px-4">
<div
class="flex flex-col w-full p-8 mx-auto mt-10 border rounded-lg lg:w-2/6 md:w-1/2 md:ml-auto md:mt-0">
<div class="relative ">
<input type="email" id="email" name="email" placeholder="Password"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative ">
<input type="email" id="email" name="email" placeholder="email"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<button
class="px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
<p class="mx-auto mt-3 text-xs "><a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Sign in with Twitter
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" /></svg>
</a></p>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 pb-24 mx-auto lg:px-4">
<div
class="flex flex-col w-full p-8 mx-auto mt-10 border rounded-lg lg:w-2/6 md:w-1/2 md:ml-auto md:mt-0">
<div class="relative ">
<input type="name" id="name" name="name" placeholder="name"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative">
<input type=" email" id="email" name="email" placeholder=" email"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative mb-4">
<input type="password" id="password" name="password" placeholder="password"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="flex justify-center">
<button
class="w-full px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl lg:w-1/2 bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Sign In</button>
<button
class="w-full px-8 py-2 font-semibold text-blue-700 transition duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl hover:border-black hover:bg-black hover:text-white lg:ml-4 lg:w-1/2 focus:ring focus:outline-none">Sign Up</button>
</div>
<p class="mx-auto mt-3 text-xs text-gray-500">Literally you probably haven't heard of them jean
shorts.</p>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 pb-24 mx-auto lg:px-4">
<div
class="flex flex-col w-full p-8 mx-auto mt-10 border rounded-lg lg:w-2/6 md:w-1/2 md:ml-auto md:mt-0">
<div class="relative ">
<input type="name" id="name" name="name" placeholder="name"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative ">
<input type=" email" id="email" name="email" placeholder=" email"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative ">
<input type="password" id="password" name="password" placeholder="password"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="flex my-4">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox">
<span class="ml-2">Subscribe me </span>
</label>
</div>
<button
class="px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 pb-24 mx-auto lg:px-4">
<div
class="flex flex-col w-full p-8 mx-auto mt-10 border rounded-lg lg:w-2/6 md:w-1/2 md:ml-auto md:mt-0">
<div class="relative ">
<input type="name" id="name" name="name" placeholder="name"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative px-4 py-2 mb-4 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
<label class="block">
<select
class="block w-full bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
</div>
<div class="relative ">
<textarea type="message" id="message" name="message" placeholder="message"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0"></textarea>
</div>
<button
class="px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-24 pb-24 mx-auto lg:px-4">
<div
class="flex flex-col w-full p-8 mx-auto mt-10 border rounded-lg lg:w-2/6 md:w-1/2 md:ml-auto md:mt-0">
<div class="flex flex-wrap -m-2">
<div class="w-1/2 p-2">
<div class="relative">
<input type="text" id="name" name="name" placeholder="name"
class="w-full px-4 py-2 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
</div>
<div class="w-1/2 p-2">
<div class="relative">
<input type="name" id="name" name="name" placeholder="name"
class="w-full px-4 py-2 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
</div>
<div class="w-full p-2">
<input type="email" id="email" name="email" placeholder="email"
class="w-full px-4 py-2 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="w-full p-2">
<input type="password" id="password" name="password" placeholder="password"
class="w-full px-4 py-2 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="w-full p-2">
<input type="password" id="password" name="password" placeholder=" password"
class="w-full px-4 py-2 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="flex p-2">
<label class="flex items-center">
<input type="checkbox" class="rounded form-checkbox">
<span class="ml-2">Subscribe me </span>
</label>
</div>
<div class="w-full p-2">
<input type="password" id="password" name="password" placeholder="password"
class="w-full px-4 py-2 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="w-full p-2 ">
<button
class="w-full px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
<p class="mx-auto mt-3 text-xs text-center text-gray-500">WickedTemplates rocks, and you know it.</p>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-24 pb-24 mx-auto lg:px-4">
<div
class="flex flex-col w-full p-8 mx-auto mt-10 border rounded-lg lg:w-2/6 md:w-1/2 md:ml-auto md:mt-0">
<div class="relative ">
<label for="email" class="text-sm leading-7 text-gray-600">Email</label>
<input type="email" id="v" name="email" placeholder="email"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative ">
<label for="name" class="text-sm leading-7 text-gray-600">Name</label>
<input type="name" id="name" name="name" placeholder="name"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative mb-4 ">
<label class="block ">
<label for="email" class="text-sm leading-7 text-gray-600">Choose</label>
<select
class="block w-full px-4 py-2 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
</div>
<div class="relative ">
<textarea type="message" id="message" name="message" placeholder="message"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0"></textarea>
</div>
<button
class="px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 mx-auto lg:px-4">
<div class="flex flex-wrap ">
<div class="px-8 py-6 text-left lg:px-24 lg:w-2/4 md:w-full lg:border-r">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font">Longer Information 1
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<div class="flex justify-center mt-6">
<input
class="flex-grow w-full px-4 py-2 mb-4 mr-4 text-base text-purple-700 bg-gray-100 border border-gray-400 rounded-lg focus:outline-none focus:border-purple-500 sm:mb-0 focus:bg-white"
placeholder="Your Email" type="email">
<button
class="flex items-center px-4 py-2 mt-auto font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 hover:-translate-y-1 hover:scale-110 focus:ringfocus:outline-none">
Action
</button>
</div>
</div>
<div class="px-8 py-6 text-left lg:px-24 lg:w-2/4 md:w-full">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font">Longer Information 2
</h2>
<p class="mb-4 text-base leading-relaxed">Professionally designed and 100% responsive static
templates for startups and personal use.
.Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 mx-auto pt-36 lg:px-4">
<div class="flex flex-wrap ">
<div class="px-8 py-6 text-left lg:px-24 lg:w-2/4 md:w-full lg:border-r">
<h2 class="mb-3 text-lg font-semibold text-blue-700 lg:text-4xl title-font">Subscribed
</h2>
<p class="mb-4 text-base leading-relaxed">Static Tailwind CSS
templates for easy integration
with your go-to language.</p>
<div class="flex flex-col w-full mx-auto mt-10 rounded-lg md:ml-auto md:mt-0">
<div class="relative ">
<input type="email" id="email" name="email" placeholder="Password"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<div class="relative ">
<input type="email" id="email" name="email" placeholder="email"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
</div>
<button
class="px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
<p class="mx-auto mt-3 text-xs text-gray-500">If there's a will there's a way.</p>
</div>
</div>
<div class="px-8 py-6 text-left lg:px-24 lg:w-2/4 md:w-full">
<h2 class="mb-3 text-lg font-semibold text-blue-700 lg:text-4xl title-font">New Subscribers
</h2>
<p class="mb-4 text-base leading-relaxed">Designing your landing page usually takes weeks.
Wickedtemplates has them ready for you so you take care of what really matters.
Deploy stunning landing pages in no time..</p>
<button
class="w-full px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
</div>
</div>
</div>
</section>
<section class="flex flex-col items-center h-screen md:flex-row">
<div class="container mx-auto">
<div class="flex justify-center px-2 py-6 ">
<div class="flex w-full rounded-lg borde xl:w-4/4 lg:w-11/12">
<div
class="relative w-full h-auto bg-white bg-cover border border-r-0 rounded-l-lg lg:w-6/12">
<div class="relative z-10 m-12 text-left">
<h2 class="mb-2 text-2xl font-semibold tracking-tight text-blue-700 sm:text-3xl title-font">
Sign up
<br class="hidden lg:block">
to our newsletter.
</h2>
<div
class="w-full mt-8 text-base leading-relaxed text-gray-700 sm:md:w-3/3 lg:text-1xl ">
WICKEDBLOCKS are a growing collection of more than 120 layout blocks and component buildt with Tailwind CSS V2 ready to
copy paste on your Tailwind project.
</div>
<div class="relative z-10 text-left ">
<form class="mt-6" action="#" method="POST">
<div class="flex flex-wrap mt-4 mb-6 -mx-3">
<div class="w-full px-3 mb-6 md:w-1/2 md:mb-0">
<label class="text-sm font-medium leading-relaxed tracking-tighter text-gray-700"
for="name" minlength="6">
Your Name
</label>
<input
class="block w-full px-4 py-2 mt-2 text-base bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0"
id="name" type="text" placeholder="Your name">
</div>
<div class="w-full px-3 md:w-1/2">
<label class="text-sm font-medium leading-relaxed tracking-tighter text-gray-700"
for="email">
Email
</label>
<input
class="block w-full px-4 py-2 mt-2 mb-4 text-base bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0"
id="email" type="text" placeholder="your@email.com">
</div>
</div>
<button class="block w-full px-4 py-3 mt-6 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Sign Up</button>
</form>
</div>
</div>
</div>
<div class="hidden w-full g-gray-400 lg:block md:w-1/3 xl:w-2/3 ">
<img src="https://dummyimage.com/600x400/F3F4F7/8693ac"
alt="" class="object-cover w-full h-full rounded-r-lg">
</div>
</div>
</div>
</div>
</section>