Tailwind CSS Input

To use these form components, remember to:

1. Install the official Tailwind CSS forms plugin using:

npm install -D @tailwindcss/forms

2. Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
    theme: {
    // ...
    },
    plugins: [
    require('@tailwindcss/forms'),
    // ...
    ],
}

1. Input Text Box

<div class="pb-4">
    <input type="text" placeholder="Enter text" class="border border-gray-300 px-4 py-2 rounded-md placeholder-gray-500" />
</div>

2. Input Number

<div class="pb-4">
    <input type="number" placeholder="Enter number" class="border border-gray-300 px-4 py-2 rounded-md placeholder-gray-500" />
</div>

3. Input Password

<div class="pb-4">
    <input type="password" placeholder="Enter password" class="border border-gray-300 px-4 py-2 rounded-md placeholder-gray-500" />
</div>

4. Input Email

<div class="pb-4">
    <!-- Email Input -->
    <input type="email" placeholder="Enter email" class="border border-gray-300 px-4 py-2 rounded-md placeholder-gray-500" />
</div>

Input Search

<div class="relative">
    <input type="text" placeholder="Search" class="border border-gray-300 p-2 pl-10 rounded-md placeholder-gray-500" />
    <svg class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19a8 8 0 100-16 8 8 0 000 16zm4.93-4.93l4.24 4.24" />
    </svg>
</div>