Form.

3 Blocks

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 ">
                            <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>
                                                    

wickedtemplates

Spring Offer! 30% discount on all products. Use the Code wicked30

Tired of designing?

Don't lose precious days designing the landing page and testing a site. Instead, integrate one with your favourite framework.


                <section class="text-gray-700 ">
                    <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 ">
                    <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>