Home
Rithik
Fullscreen login form with image backround

Fullscreen login form with image backround

This tailwind example is contributed by Rithik, on 29-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Rithik

1.5k

Fork Fullscreen

<section class="section-padding bg-cover bg-center bg-fixed" style="background-image: url('https://picsum.photos/1920/1080')">
  <div class="container mx-auto py-8">
    <h2 class="font-lato text-3xl text-center font-extrabold text-white"> Sign up to start a free trial account </h2>
    <form class="mt-6">
      <div class="grid grid-cols-8 gap-4">
        <div class="col-start-2 col-end-5">
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5"
              id="fname" type="text" placeholder="First Name*" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="lname" type="text" placeholder="Last Name*" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="email" type="email" placeholder="Email*" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="phone" type="number" placeholder="Phone Number*" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="job" type="text" placeholder="Job Title" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="company" type="text" placeholder="Company" />
          </div>
        </div>
        <div class="col-start-5 col-end-8">
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="url" type="url" placeholder="Website URL" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="address" type="text" placeholder="Address" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="address" type="text" placeholder="Address 2" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="city" type="text" placeholder="City" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="region" type="text" placeholder="State / Province / Region" />
          </div>
          <div class="mb-4">
            <input
              class="border rounded w-full py-3 px-4 text-grey leading-5 focus:outline-none focus:shadow-outline"
              id="pin" type="number" placeholder="Zip Code" />
          </div>
        </div>
      </div>
      <div class="grid grid-cols-8">
        <div class="col-start-2 col-end-8">
          <button class="font-lato bg-sky-700 border border-primary text-white text-h4 py-3 px-3.5 rounded-lg  w-full lg:mt-8 mt-4">Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</section>

Related Examples

Login form

Author:
Leon Bachmann

2 years ago

12.3k
Register form

Author:
Maxim

3 months ago

713
Animated Sign in background
Sign-in page with floating blobs as background.

Author:
Nii Anyetei

7 months ago

1.9k
Login
Login Creen office

Author:
Rushikesh Latpate

3 months ago

548
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

7 months ago

898
Responsive login form with image

Author:
Lukas Müller

2 years ago

13.6k
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
AyDin VM

1 year ago

5.4k
Login Card

Author:
Anonymous

1 year ago

6k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

36.7k
Form
form

Author:
Aman kumar

9 months ago

1.3k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

9 months ago

1.3k
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

9 months ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components