Category
Input
Argon Regular Input with icon
<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
<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
<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
<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
<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
<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)
<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
<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
<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 border-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
<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 border-transparent focus:outline-none text-gray-700"
/>
</label>