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

2.1k

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
login form with sign in with Google button

Author:
gmer33

2 years ago

22.8k
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

Author:
zobaidul kaziex

1 year ago

3.2k
Sign Up form with dark mode support

Author:
Anonymous

2 years ago

11.9k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

3 weeks ago

41
Login page

Author:
Reuben Enahoro

11 months ago

1.8k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

5 months ago

610
Login form #1
login form design

Author:
QQ-VVN

5 months ago

124
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

5 months ago

304
Login

Author:
Aman kumar

5 months ago

405
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
Anonymous

7 months ago

498
Responsive registration form
form with social login buttons

Author:
Anonymous

2 years ago

28.1k
Login/Register Form with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components