WEB 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="Password"
class="w-full px-4 py-2 mb-4 mr-4 text-base text-black transition duration-500 ease-in-out transform border-transparent rounded-lg bg-blueGray-100 focus:border-gray-500 focus:bg-white focus:outline-none focus:shadow-outline focus:ring-2 ring-offset-current ring-offset-2">
</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-black transition duration-500 ease-in-out transform border-transparent rounded-lg bg-blueGray-100 focus:border-gray-500 focus:bg-white focus:outline-none focus:shadow-outline focus:ring-2 ring-offset-current ring-offset-2">
</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 bg-black rounded-lg hover:bg-gray-800 hover:to-black focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">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-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 bg-black rounded-lg hover:bg-gray-800 hover:to-black focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">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-black transition duration-500 ease-in-out transform border-transparent rounded-lg bg-blueGray-100 focus:border-gray-500 focus:bg-white focus:outline-none focus:shadow-outline focus:ring-2 ring-offset-current ring-offset-2">
</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-black transition duration-500 ease-in-out transform border-transparent rounded-lg bg-blueGray-100 focus:border-gray-500 focus:bg-white focus:outline-none focus:shadow-outline focus:ring-2 ring-offset-current ring-offset-2">
</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-black transition duration-500 ease-in-out transform border-transparent rounded-lg bg-blueGray-100 focus:border-gray-500 focus:bg-white focus:outline-none focus:shadow-outline focus:ring-2 ring-offset-current ring-offset-2"></textarea>
</div>
<button
class="px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform bg-black rounded-lg hover:bg-gray-800 hover:to-black focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">Button</button>
</div>
</div>
</section>
