TailwindTemplates

Category

Input

Argon Regular Input with icon

Copied!

                    
                         <div class="relative">
  <input
    class="appearance-none border pl-12 border-gray-200 focus:placeholder-gray-600  transition  rounded-md w-full py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:ring-gray-600 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Regular with icon"
  />
  <div class="absolute left-0 inset-y-0 flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 ml-3 text-gray-500 p-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
  </div>
</div>
                    
                

Argon Regular input with icon - Alternative

Copied!

                    
                         <div class="relative">
  <input
    class="appearance-none border pl-12 border-gray-100 shadow-sm focus:shadow-md focus:placeholder-gray-600  transition  rounded-md w-full py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:ring-gray-600 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Alternative with icon"
  />
  <div class="absolute left-0 inset-y-0 flex items-center">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 ml-3 text-gray-500 p-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
  </div>
</div>
                    
                

Argon Error Input - Alternative

Copied!

                    
                         <div class="relative">
  <input
    class="appearance-none border placeholder-red-400 border-gray-100 shadow-sm focus:shadow-md focus:placeholder-gray-600  transition  rounded-md w-full py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:ring-gray-600 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Success"
  />
  <div class="absolute right-0 inset-y-0 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg"  class="h-6 w-6 mr-3 bg-red-500 rounded-full text-white p-1" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
  </div>
</div>
                    
                

Argon Success Input - Alternative

Copied!

                    
                         <div class="relative">
  <input
    class="appearance-none border placeholder-green-400 border-gray-100 shadow-sm focus:shadow-md focus:placeholder-gray-600  transition  rounded-md w-full py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:ring-gray-600 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Success"
  />
  <div class="absolute right-0 inset-y-0 flex items-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 mr-3 bg-green-500 rounded-full text-white p-1"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M5 13l4 4L19 7"
      />
    </svg>
  </div>
</div>
                    
                

Argon Error Input

Copied!

                    
                         <div class="relative">
  <input
    class="appearance-none border placeholder-red-500 focus:placeholder-gray-600 border-red-300 hover:border-red-400 transition-colors rounded-md w-full py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:ring-gray-600 focus:border-gray-400 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Error"
  />
  <div class="absolute right-0 inset-y-0 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 bg-red-500 rounded-full text-white p-1" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
  </div>
</div>
                    
                

Argon Success Input

Copied!

                    
                         <div class="relative">
  <input
    class="appearance-none border placeholder-green-500 focus:placeholder-gray-600 border-green-300 hover:border-green-400 transition-colors rounded-md w-full py-2 px-3 text-gray-600 leading-tight focus:outline-none focus:ring-gray-600 focus:border-gray-400 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Success"
  />
  <div class="absolute right-0 inset-y-0 flex items-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 mr-3 bg-green-500 rounded-full text-white p-1"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M5 13l4 4L19 7"
      />
    </svg>
  </div>
</div>
                    
                

Argon Input (alternative)

Copied!

                    
                         <input
    class="appearance-none border border-gray-100 bg-white shadow-sm transition focus:shadow-md rounded-md w-full p-3 text-gray-800 leading-tight focus:outline-none focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Regular"
  />
                    
                

Argon Regular input

Copied!

                    
                         <input
    class="appearance-none border border-gray-300 hover:border-gray-400 transition-colors rounded-md w-full p-3 text-gray-800 leading-tight focus:outline-none focus:ring-gray-600 focus:gray-purple-600 focus:shadow-outline"
    id="username"
    type="text"
    placeholder="Regular"
  />
                    
                

Biings input field: Required

Copied!

                    
                         <label
  for="input1"
  class="p-4 text-gray-800 relative focus-within:text-purple-800 bg-white transition-colors rounded-md block border-2 border-gray-200 focus-within:border-purple-600"
>
  <p class="mb-2 ">Name</p>
  <input
    type="text"
    id="input1"
    placeholder="Your name..."
    class="w-full bg-transparent focus:outline-none text-gray-700"
  />
  <div class="absolute left-0 inset-y-0 flex items-center -ml-2 mt-8">
  <span class="flex h-3 w-3 relative">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-purple-500"></span>
  </div>
</span>
</label>
                    
                

Biings input field: Error

Copied!

                    
                         <label
  for="input1"
  class="p-4 text-gray-800 focus-within:text-purple-800 caret-red-500 bg-white transition-colors rounded-md block border-2 border-red-400 focus-within:border-red-600"
>
  <p class="mb-2 ">Name</p>
  <input
    type="text"
    id="input1"
    placeholder="Your name..."
    class="w-full bg-transparent focus:outline-none text-gray-700"
  />
</label>