Tailwind Css Form Layout Examples Complete Guide

 Last Update:2025-06-22T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    10 mins read      Difficulty-Level: beginner

Understanding the Core Concepts of Tailwind CSS Form Layout Examples

Tailwind CSS Form Layout Examples

1. Basic One-Column Form

A foundational example is creating a basic one-column form layout, where each form control (input, textarea, select, etc.) spans the entire width of its container.

HTML Markup:

<form class="bg-white p-6 rounded-lg max-w-md mx-auto shadow-lg">
    <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="you@example.com">
    </div>
    <div class="mb-4">
        <label for="password" class="block text-gray-700 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
            Sign In
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
            Forgot Password?
        </a>
    </div>
</form>

Important Info:

  • Container Styling: The form container uses p-6 for padding and max-w-md mx-auto to center it with a maximum width. Shadow utilities like shadow-lg provide visual depth.
  • Input Styling: Inputs are styled with shadow appearance-none border rounded w-full to maintain a sleek appearance and responsiveness.
  • Focus Effects: The focus:outline-none focus:shadow-outline utilities remove default browser outlines and add a subtle shadow when focused, enhancing the user experience.

2. Responsive Two-Column Form

For larger screens, you can arrange form controls into two columns side-by-side, providing a more space-efficient interface.

HTML Markup:

<form class="bg-white p-6 rounded-lg max-w-xl mx-auto shadow-lg space-y-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label for="first_name" class="block text-gray-700 text-sm font-medium mb-2">First Name</label>
            <input type="text" id="first_name" name="first_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Jane">
        </div>
        <div>
            <label for="last_name" class="block text-gray-700 text-sm font-medium mb-2">Last Name</label>
            <input type="text" id="last_name" name="last_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Doe">
        </div>
    </div>
    <div>
        <label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="you@example.com">
    </div>
    <div class="flex items-center justify-end">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
            Submit
        </button>
    </div>
</form>

Important Info:

  • Grid System: The grid class along with responsive modifiers (md:grid-cols-2) splits the form into two columns on medium-sized screens and above.
  • Gap Classes: gap-4 ensures there's enough spacing between the columns for readability.
  • Full Width Inputs: Each input element (w-full) adapts to the width of its column container.

3. Inline Form Layout

Sometimes, a more horizontal layout where labels and inputs appear inline is required, as seen in many search forms.

HTML Markup:

<form class="bg-white p-6 rounded-lg max-w-sm flex space-x-4 items-center mx-auto shadow-lg">
    <div>
        <label for="search" class="sr-only">Search...</label>
        <input type="text" id="search" name="search" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Search...">
    </div>
    <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Search
    </button>
</form>

Important Info:

  • Flexbox: The flex class arranges the label and input horizontally. space-x-4 adds space between children elements.
  • Hidden Labels: Using sr-only makes the label accessible for screen readers but hidden from view.
  • Button Styling: The button is styled similarly to other buttons with hover effects included.

4. Floating Labels Form

Floating labels, where the label moves out of the input field upon focus or filling out a field, can be particularly visually engaging and useful.

HTML Markup:

<form class="bg-white p-6 rounded-lg max-w-md mx-auto shadow-lg space-y-4">
    <div class="relative">
        <input id="username" type="text" class="peer h-10 w-full border-b-2 border-gray-300 text-gray-900 placeholder-transparent focus:outline-none focus:border-blue-500" placeholder="Username">
        <label for="username" class="absolute left-0 -top-6 text-blue-500 text-sm peer-placeholder-shown:text-gray-500 peer-placeholder-shown:-top-2 transition-all duration-200 ease-linear">Username</label>
    </div>
    <div class="relative">
        <input id="email_floating" type="email" class="peer h-10 w-full border-b-2 border-gray-300 text-gray-900 placeholder-transparent focus:outline-none focus:border-blue-500" placeholder="Email">
        <label for="email_floating" class="absolute left-0 -top-6 text-blue-500 text-sm peer-placeholder-shown:text-gray-500 peer-placeholder-shown:-top-2 transition-all duration-200 ease-linear">Email address</label>
    </div>
    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Register
    </button>
</form>

Important Info:

  • Peer Elements: Tailwind’s peer-* utilities allow you to style sibling elements based on the state of the main element. For instance, once the input gains focus or contains text, its corresponding label moves up and changes color.
  • Placeholder Handling: placeholder-transparent hides the placeholder text by default, showing only the floating label until the input is focused or filled.

5. Vertical Form Groups

Grouping related form controls vertically can improve organization and readability.

HTML Markup:

<form class="bg-white p-6 rounded-lg max-w-lg mx-auto shadow-lg space-y-4">
    <fieldset class="border p-4 rounded-lg space-y-4">
        <legend class="font-bold text-gray-700">Address Information</legend>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label for="street" class="block text-gray-700 text-sm font-medium mb-2">Street Address</label>
                <input type="text" id="street" name="street" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="4 Privet Drive">
            </div>
            <div>
                <label for="city" class="block text-gray-700 text-sm font-medium mb-2">City</label>
                <input type="text" id="city" name="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Little Whinging">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label for="state" class="block text-gray-700 text-sm font-medium mb-2">State</label>
                <select id="state" name="state" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight bg-white focus:outline-none focus:shadow-outline">
                    <option disabled>Choose a state</option>
                    <option>California</option>
                    <option>Texas</option>
                    <!-- More options here -->
                </select>
            </div>
            <div>
                <label for="zip" class="block text-gray-700 text-sm font-medium mb-2">ZIP Code</label>
                <input type="text" id="zip" name="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="12345">
            </div>
        </div>
        <div>
            <label for="country" class="block text-gray-700 text-sm font-medium mb-2">Country</label>
            <select id="country" name="country" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight bg-white focus:outline-none focus:shadow-outline">
                <option disabled>Choose a country</option>
                <option>United States</option>
                <option>Canada</option>
                <!-- More options here -->
            </select>
        </div>
    </fieldset>
    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Save Address
    </button>
</form>

Important Info:

  • Fieldsets and Legends: Utilize fieldset and legend for semantic form grouping. Legends can easily be customized for appearance.
  • Nested Grids: Combining vertical groups (grid-cols-1) with responsive two-column layout (md:grid-cols-2 and md:grid-cols-3) allows for flexible and organized forms.

6. Form with Validation Feedback

Adding validation feedback—such as error messages or green tick icons to indicate successful validation—is crucial for user-guided forms.

HTML Markup:

<form class="bg-white p-6 rounded-lg max-w-md mx-auto space-y-4 shadow-lg">
    <div>
        <label for="username_valid" class="block text-gray-700 text-sm font-medium mb-2">Username</label>
        <input id="username_valid" name="username_valid" class="border p-2 rounded w-full text-green-700 focus:ring-2 focus:ring-green-300 placeholder-green-500" placeholder="jane_doe">
        <p class="text-xs italic text-green-600"><svg class="inline w-4 h-4 mr-1 mb-[2px]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>Valid username!</p>
    </div>
    <div>
        <label for="email_invalid" class="block text-gray-700 text-sm font-medium mb-2">Email</label>
        <input id="email_invalid" name="email_invalid" class="border p-2 rounded w-full text-red-700 focus:ring-2 focus:ring-red-300 placeholder-red-500" placeholder="invalid-email">
        <p class="text-xs italic text-red-600"><svg class="inline w-4 h-4 mr-1 mb-[2px]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414L8.586 12l-1.293 1.293a1 1 0 101.414 1.414L10 13.414l1.293 1.293a1 1 0 001.414-1.414L11.414 12l1.293-1.293a1 1 0 000-1.414L10 10.586z" clip-rule="evenodd"></path></svg>Please enter a valid email address.</p>
    </div>
    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Update Profile
    </button>
</form>

Important Info:

  • Validation Messages: Tailwind provides various color classes to indicate success (green) and errors (red). Adding SVG icons alongside text enhances feedback visibility.
  • Interactive Focus: focus:ring-2 focus:ring-green-300 ensures that successful entries are marked, encouraging the user to continue accurately.

7. Multi-Step Registration Process

Creating a form that guides users through multiple steps provides a structured way of collecting data, especially when registration involves several pieces of information.

HTML Markup:

<div class="bg-white p-6 rounded-lg max-w-lg mx-auto shadow-lg" x-data="{ step: 1 }">
    <h5 class="font-bold text-gray-700 mb-4">Registration Step <span x-text="step"></span>/3</h5>
    <form x-show="step === 1" class="space-y-4">
        <!-- Step 1 Content -->
        <div>
            <label for="first_name_step" class="block text-gray-700 text-sm font-medium mb-2">First Name</label>
            <input type="text" id="first_name_step" name="first_name_step" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Jane">
        </div>
        <div>
            <label for="last_name_step" class="block text-gray-700 text-sm font-medium mb-2">Last Name</label>
            <input type="text" id="last_name_step" name="last_name_step" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Doe">
        </div>
        <button type="button" @click="step++" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Next</button>
    </form>
    <form x-show="step === 2" class="space-y-4">
        <!-- Step 2 Content -->
        <div>
            <label for="email_step" class="block text-gray-700 text-sm font-medium mb-2">Email Address</label>
            <input type="email" id="email_step" name="email_step" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="you@example.com">
        </div>
        <div>
            <label for="password_step" class="block text-gray-700 text-sm font-medium mb-2">Password</label>
            <input type="password" id="password_step" name="password_step" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="******************">
        </div>
        <button type="button" @click="step--" class="bg-gray-300 hover:bg-gray-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Previous
        </button>
        <button type="button" @click="step++" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Next
        </button>
    </form>
    <form x-show="step === 3" class="space-y-4">
        <!-- Step 3 Content -->
        <p class="text-gray-700">Review the provided information:</p>
        <p class="text-sm">Username: <span id="username_display"></span></p>
        <p class="text-sm">Email: <span id="email_display"></span></p>
        <!-- Review Steps -->
        <button type="button" @click="step--" class="bg-gray-300 hover:bg-gray-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Previous
        </button>
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Register
        </button>
    </form>
</div>

Important Info:

  • Alpine.js Integration: Though this example uses Alpine.js for interactivity (to display different form steps), Tailwind CSS handles the styling. You can adapt the same approach with any JavaScript library.
  • Conditional Display: x-show="step === 1" dynamically shows/hides form sections based on current step using Alpine.js directives.
  • User Review Step: Including a review step helps ensure accuracy and improves the overall process flow.

Important General Keywords

These keywords are essential for understanding and implementing form layouts with Tailwind CSS:

  • Container Styles: bg-white, rounded-lg, max-w-md, mx-auto, shadow-lg
  • Form Controls: border, rounded, w-full, py-2, px-3, focus:outline-none, focus:shadow-outline
  • Label Styles: block, text-gray-700, text-sm, font-medium, mb-2
  • Responsive Design: grid, grid-cols-1, md:grid-cols-2, md:grid-cols-3, gap-4, flex
  • Interactive Utilities: hover:bg-blue-700, transition-all, duration-200, ease-linear
  • Validation Indicators: text-green-600, text-red-600, placeholder-green-500
  • Step-Based Navigation: x-data, x-show, @click
  • Legend and Fieldset: These semantic HTML elements for grouping related form elements are styled similarly using Tailwind's utility classes.

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Tailwind CSS Form Layout Examples

Example 1: Basic Contact Form

Step-by-Step Guide

  1. Setup Your Project

    • Ensure you have Tailwind CSS installed in your project. You can install it using npm: 
      npm init -y # This command creates a package.json file if you don't have one.
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p # Initializes tailwind.config.js and postcss.config.js

  2. Configure Tailwind for Production

    • Open tailwind.config.js and add paths to all of your template files: 
      /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  3. Create an HTML File

    • Create a new file named contact-form.html and include the generated CSS from Tailwind: 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link href="/output.css" rel="stylesheet"> <!-- This path should be correct according to your PostCSS output -->
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 space-y-6">
        <h2 class="text-2xl font-semibold text-center">Contact Us</h2>

        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
                Name
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                   id="name" 
                   type="text" 
                   placeholder="Your Name">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
                Email
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                   id="email" 
                   type="email" 
                   placeholder="example@gmail.com">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="message">
                Message
            </label>
            <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline h-40 resize-none" 
                      id="message" 
                      placeholder="Your message..."></textarea>
        </div>

        <div class="flex items-center justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                    type="submit">
                Send Message
            </button>
        </div>
    </form>
</body>
</html>

  4. Build the CSS

    • Build your CSS using the command provided in the tailwind.config.js: 
      npx tailwindcss -i ./src/input.css -o ./output.css --watch
      This command assumes you have an input.css file (which is just a simple entry point file containing @tailwind base;, @tailwind components;, and @tailwind utilities;).

  5. Final Output

    Basic Contact Form

Example 2: Registration Form with Additional Fields

Step-by-Step Guide

We'll extend our basic contact form into a more detailed registration form with fields like password and confirm password.

  1. Modify contact-form.html

    • Change the title to "Registration Form" and add more input fields accordingly: 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
    <link href="/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 space-y-4">
        <h2 class="text-2xl font-semibold text-center">Register</h2>

        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
                Name
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                   id="name" 
                   type="text" 
                   placeholder="Your Name">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
                Email
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                   id="email" 
                   type="email" 
                   placeholder="example@gmail.com">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                Password
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" 
                   id="password" 
                   type="password" 
                   placeholder="******************">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="confirm-password">
                Confirm Password
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                   id="confirm-password" 
                   type="password" 
                   placeholder="******************">
        </div>

        <div class="flex items-center justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                    type="submit">
                Register
            </button>
        </div>
    </form>
</body>
</html>

  2. Final Output

    Registration Form

Example 3: Login Form with Social Media Buttons

Step-by-Step Guide

For this example, we will create a simple login form with additional buttons for social media authentication.

  1. Modify contact-form.html

    • Rename the title to "Login Form", reduce fields, and integrate social media buttons: 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <link href="/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 space-y-4">
        <h2 class="text-2xl font-semibold text-center">Login</h2>

        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
                Email
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                   id="email" 
                   type="email" 
                   placeholder="example@gmail.com">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                Password
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" 
                   id="password" 
                   type="password" 
                   placeholder="******************">
        </div>

        <div class="flex items-center justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                    type="submit">
                Sign In
            </button>
            <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
                Forgot Password?
            </a>
        </div>

        <hr class="border border-gray-300 my-6">

        <div class="flex space-x-4">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex-1">
                <img src="facebook-icon.png" alt="Facebook" class="w-4 h-4 mr-2"> Continue with Facebook
            </button>
            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex-1">
                <img src="google-icon.png" alt="Google" class="w-4 h-4 mr-2"> Continue with Google
            </button>
        </div>
    </form>
</body>
</html>

  2. Final Output

    Login Form with Social Media Icons

Example 4: Inline Form with Search Input

Step-by-Step Guide

This example will showcase how to design an inline form commonly used with search functionality.

  1. Create a New HTML File

    • Create a file named inline-search-form.html: 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Search Form</title>
    <link href="/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <form class="space-x-4 max-w-lg flex items-end bg-white shadow-md rounded px-8 py-4 space-x-4">
        <div class="flex flex-col flex-1">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="search">Search</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                   id="search" 
                   type="text" 
                   placeholder="Search...">
        </div>

        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                type="submit">
            Submit
        </button>
    </form>
</body>
</html>

  2. Final Output

    Inline Search Form

Example 5: Form with Grid Layout

Step-by-Step Guide

In this final example, we will use Tailwind CSS grid to organize multiple form inputs in different sections.

  1. Create a New HTML File

    • Create a file named grid-form.html: 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form with Grid Layout</title>
    <link href="/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 space-y-4 w-full max-w-3xl">
        <h2 class="text-2xl font-semibold text-center">Profile Information</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2" for="firstName">
                    First Name
                </label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" 
                       id="firstName" 
                       type="text" 
                       placeholder="Jane">
            </div>

            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2" for="lastName">
                    Last Name
                </label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" 
                       id="lastName" 
                       type="text" 
                       placeholder="Doe">
            </div>
        </div>

        <div>
            <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
                Email
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" 
                   id="email" 
                   type="email" 
                   placeholder="jane.doe@gmail.com">
        </div>

        <div>
            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                Password
            </label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" 
                   id="password" 
                   type="password" 
                   placeholder="******************">
        </div>

        <div class="flex items-center justify-between">
            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                    type="submit">
                Create Profile
            </button>
        </div>
    </form>
</body>
</html>

  2. Final Output

    Grid Form

Top 10 Interview Questions & Answers on Tailwind CSS Form Layout Examples

1. How do I create a simple horizontal form layout using Tailwind CSS?

Answer: A horizontal form layout can be achieved by using Tailwind's grid utility to align form elements side by side. Here's a basic example:

<form class="grid grid-cols-2 gap-4">
  <label class="text-right">Name:</label>
  <input type="text" class="form-input" />
  
  <label class="text-right">Email:</label>
  <input type="email" class="form-input" />
  
  <label class="text-right">Password:</label>
  <input type="password" class="form-input" />
  
  <button class="col-span-2 self-end mt-2">Submit</button>
</form>

2. Can I create a responsive form that adjusts to both desktop and mobile views?

Answer: Yes, Tailwind's responsive utilities make it easy to create responsive form layouts. Here’s an example of a responsive form:

<form class="max-w-screen-sm mx-auto">
  <div class="mb-4">
    <label class="block mb-1">Name:</label>
    <input type="text" class="form-input w-full" />
  </div>
  <div class="mb-4">
    <label class="block mb-1">Email:</label>
    <input type="email" class="form-input w-full" />
  </div>
  <div class="mb-4">
    <label class="block mb-1">Password:</label>
    <input type="password" class="form-input w-full" />
  </div>
  <button class="w-full bg-blue-500 text-white py-2">Submit</button>
</form>

3. How can I style a form to have a vertical layout that spans the full width?

Answer: Using Tailwind’s spacing utilities, you can create a vertical form layout easily:

<form class="max-w-screen-sm mx-auto space-y-4">
  <label>
    <span class="block mb-1">Name:</span>
    <input type="text" class="form-input w-full" />
  </label>
  <label>
    <span class="block mb-1">Email:</span>
    <input type="email" class="form-input w-full" />
  </label>
  <label>
    <span class="block mb-1">Password:</span>
    <input type="password" class="form-input w-full" />
  </label>
  <button class="w-full bg-blue-500 text-white py-2">Submit</button>
</form>

4. What’s the best way to add error styling to a form field in Tailwind CSS?

Answer: Apply Tailwind’s color utilities to highlight error fields. Here’s an example:

<input type="text" class="form-input border-red-500" placeholder="This field has an error" />
<span class="text-red-500 text-sm">This field is required.</span>

5. How can I make a form field focus-styled similarly across all browsers?

Answer: Utilize Tailwind's focus variants to style focused elements:

<input type="text" class="form-input focus:outline-none focus:ring-2 focus:ring-blue-500" />

Explanation: This ensures a consistent focus outline and background color when the input field is focused.

6. What are some tips for using Tailwind with more complex form layouts, like those with checkboxes and radio buttons?

Answer: Flexbox and grid utilities can help create complex layouts:

<fieldset class="mb-4">
  <legend class="block mb-2">Choose your options</legend>
  <div class="flex items-center mb-2">
    <input id="option-1" type="checkbox" class="form-checkbox mr-2" />
    <label for="option-1">Option 1</label>
  </div>
  <div class="flex items-center mb-2">
    <input id="option-2" type="checkbox" class="form-checkbox mr-2" />
    <label for="option-2">Option 2</label>
  </div>
</fieldset>

<fieldset class="mb-4">
  <legend class="block mb-2">Select your favorite color</legend>
  <div class="flex items-center mb-2">
    <input id="red" type="radio" class="form-radio mr-2" name="color" />
    <label for="red">Red</label>
  </div>
  <div class="flex items-center mb-2">
    <input id="blue" type="radio" class="form-radio mr-2" name="color" />
    <label for="blue">Blue</label>
  </div>
</fieldset>

7. How can I add a custom border radius to form input fields?

Answer: Use the rounded utility classes to set borders:

<input type="text" class="form-input rounded-full" placeholder="Input with circular borders" />

Explanation: This adds circular borders to the input fields.

8. What is the best way to style a form with disabled inputs using Tailwind CSS?

Answer: Tailwind allows you to disable inputs and style them using the disabled variant:

<input type="text" class="form-input w-full disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed" disabled placeholder="Disabled input field" />

Explanation: This sets the background and text color, and changes the cursor to indicate that the field is disabled.

9. How can I create a form that has a submit button styled as a primary button?

Answer: Use Tailwind's color utilities to style buttons:

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
  Submit
</button>

Explanation: This creates a primary button with a hover effect.

10. Can I make multi-step forms using Tailwind CSS?

Answer: Yes, you can organize multi-step forms by using Tailwind’s flexbox and spacing utilities. Here’s a simplified example:

<div class="flex flex-col space-y-4">
  <!-- Step 1 -->
  <div id="step-1" class="p-4 bg-gray-100 rounded">
    <h3>Step 1</h3>
    <!-- Input fields for step 1 -->
  </div>

  <!-- Step 2 -->
  <div id="step-2" class="p-4 bg-gray-100 rounded hidden">
    <h3>Step 2</h3>
    <!-- Input fields for step 2 -->
  </div>

  <!-- Navigation buttons -->
  <div class="flex justify-between">
    <button id="prev-btn" class="bg-gray-500 text-white py-2 px-4 rounded disabled:bg-gray-400">Previous</button>
    <button id="next-btn" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 disabled:bg-blue-400">Next</button>
  </div>
</div>

<script>
// JavaScript to handle the navigation
document.getElementById('next-btn').addEventListener('click', function() {
  document.getElementById('step-1').classList.add('hidden');
  document.getElementById('step-2').classList.remove('hidden');
});

document.getElementById('prev-btn').addEventListener('click', function() {
  document.getElementById('step-2').classList.add('hidden');
  document.getElementById('step-1').classList.remove('hidden');
});
</script>

Explanation: This example uses simple JavaScript to toggle the visibility of different steps based on user interaction.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.