WickedBlocks ©

Forms.

11 Blocks

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.

1 

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

Have a look to Wicked Templates.
2 

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

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

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

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

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

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

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

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

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

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