TailwindTemplates

Recently added

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"
  />
                    
                

Argon alerts

Copied!

                    
                         <!-- Success -->
<div class="px-8 py-6 bg-green-400 text-white flex justify-between rounded">
    <div class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mr-6" viewBox="0 0 20 20" fill="currentColor">
            <path
                d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
            />
        </svg>
        <p>Success! This is a success alert—check it out!</p>
    </div>
    <button class="text-green-100 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>

<!-- Info -->
<div class="px-8 py-6 bg-blue-400 text-white flex justify-between rounded">
    <div class="flex items-center">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mr-6" viewBox="0 0 20 20" fill="currentColor">
  <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
        <p>Info! This is an info alert—check it out!</p>
    </div>
    <button class="text-blue-100 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>

<!-- Warning -->
<div class="px-8 py-6 bg-yellow-400 text-white flex justify-between rounded">
    <div class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mr-6" viewBox="0 0 20 20" fill="currentColor">
  <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
        <p>Warning! This is a warning alert—check it out!</p>
    </div>
    <button class="text-yellow-100 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>

<!-- Danger -->
<div class="px-8 py-6 bg-red-400 text-white flex justify-between rounded">
    <div class="flex items-center">
   <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mr-6" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
        <p>Danger! This is an error alert—check it out!</p>
    </div>
    <button class="text-red-100 hover:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>
                    
                

Argon Badges

Copied!

                    
                         <!-- Default -->
<span class="bg-gray-800 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Default</span>
<!-- Primary -->
 <span class="bg-indigo-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Primary</span>
<!-- Success -->
<span class="bg-green-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Success</span>
<!-- Danger -->
<span class="bg-red-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Danger</span>
<!-- Warning -->
<span class="bg-yellow-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Warning</span>
<!-- Info -->
<span class="bg-blue-500 rounded-full text-white px-3 py-1 text-xs uppercase font-medium">Info</span>