Fullscreen login form with image backround

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

Author Rithik

Tailwind v3.4 2.7k 8

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

Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

wavy kits

1 year ago

722
Responsive login form
form with social login buttons

Aman kumar

2 years ago

6k
Neo-Brutalist Login Form

JUGENDRA GANGWAR

3 weeks ago

31
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Fathallah Anass

2 years ago

3.7k
Simple registration form
Registration

Jerome Soriano

9 months ago

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

Anonymous

1 year ago

868
login from with fingerprint

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.4k
Login form with social login buttons

Task Master

3 years ago

20.5k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

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

wavy kits

1 year ago

1.1k
Sign In page with google/facebook/twitter buttons
sanjay

Sanjay Kumar

9 months ago

756
Responsive registration form
form with social login buttons

Anonymous

3 years ago

30.8k