forms
Tailwind CSS Input
<div class="mx-auto max-w-xs">
<input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="Name" />
</div>
<div class="mx-auto max-w-xs">
<div>
<label for="example1" class="mb-1 block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="example1" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="[email protected]" />
</div>
</div>
<div class="mx-auto max-w-xs">
<div>
<label for="example2" class="mb-1 block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*']">Email</label>
<input type="email" id="example2" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="[email protected]" />
<p class="mt-1 text-sm text-gray-500">This is a help message.</p>
</div>
</div>
<div class="mx-auto max-w-xs">
<div>
<label for="example3" class="mb-1 block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*']">Email</label>
<input type="email" id="example3" class="block w-full rounded-md border-red-300 shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="[email protected]" />
<p class="mt-1 text-sm text-red-500">This is a error message.</p>
</div>
</div>
<div class="mx-auto max-w-xs">
<input type="text" disabled value="Steve Jobs" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="Full name" />
</div>
<div class="mx-auto max-w-xs">
<div>
<label for="example4" class="mb-1 block text-sm font-medium text-gray-700">Email</label>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
<input type="email" id="example4" class="block w-full rounded-md border-gray-300 pl-10 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="[email protected]" />
</div>
</div>
</div>
<div class="mx-auto max-w-xs">
<div>
<label for="example5" class="mb-1 block text-sm font-medium text-gray-700">Email</label>
<div class="relative">
<div class="absolute inset-y-0 right-0 flex items-center px-2.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
</svg>
</div>
<input type="email" id="example5" class="block w-full rounded-md border-gray-300 pr-10 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="[email protected]" />
</div>
</div>
</div>
<div class="mx-auto max-w-xs">
<div>
<label for="example6" class="mb-1 block text-sm font-medium text-gray-700">Price</label>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5 text-gray-500">$</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-gray-500">USD</div>
<input type="email" id="example6" class="block w-full rounded-md border-gray-300 px-8 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="0.00" />
</div>
</div>
</div>
<div class="mx-auto max-w-xs space-y-4">
<div>
<label for="example7" class="mb-1 block text-sm font-medium text-gray-700">Website</label>
<div class="relative z-0 flex">
<div class="inset-y-0 left-0 flex items-center rounded-md rounded-r-none border border-r-0 border-gray-300 bg-gray-100 px-2.5 text-gray-700">https://</div>
<input type="url" id="example7" class="block w-full rounded-md rounded-l-none border-gray-300 shadow-sm focus:z-10 focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="example.com" />
</div>
</div>
<div>
<label for="example7" class="mb-1 block text-sm font-medium text-gray-700">Website</label>
<div class="relative z-0 flex">
<input type="url" id="example7" class="block w-full rounded-md rounded-r-none border-gray-300 shadow-sm focus:z-10 focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="Enter custom domain" />
<div class="inset-y-0 left-0 flex items-center rounded-md rounded-l-none border border-l-0 border-gray-300 bg-gray-100 px-2.5 text-gray-700">.sailboatui.com</div>
</div>
</div>
</div>
<div class="mx-auto max-w-xs">
<div>
<label for="example8" class="mb-1 block text-sm font-medium text-gray-700">Url</label>
<div class="relative z-0 flex">
<input type="url" id="example8" class="block w-full rounded-md rounded-r-none border-gray-300 shadow-sm focus:z-10 focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="example.com" value="https://sailboatui.com/" />
<button for="example8" class="flex items-center space-x-1 rounded-md rounded-l-none border border-l-0 border-gray-300 px-2.5 text-gray-700 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z" />
</svg>
<span>Copy</span>
</button>
</div>
</div>
</div>
<div class="mx-auto max-w-xs">
<div>
<div class="group relative">
<input type="text" id="example9" class="block w-full rounded-md border-gray-300 px-10 shadow-sm transition-all hover:bg-gray-50 focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="Quick search..." />
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5 text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
</svg>
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5">
<span class="rounded border px-1.5 text-sm text-gray-400 shadow-sm transition-all group-hover:border-primary-500 group-hover:text-primary-500"><kbd>⌘</kbd> <kbd>K</kbd></span>
</div>
</div>
</div>
</div>
<div class="mx-auto max-w-xs space-y-5">
<div>
<label for="example10" class="mb-1 block text-sm font-medium text-gray-700">Phone number</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center text-gray-500">
<label for="currency" class="sr-only">Currency</label>
<select id="currency" id="currency" class="h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:border-primary-500 focus:ring-primary-500 sm:text-sm">
<option>US</option>
<option>CA</option>
<option>JP</option>
<option>CN</option>
</select>
</div>
<div class="absolute inset-y-0 right-0 flex items-center px-2.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
</svg>
</div>
<input type="text" id="example10" class="block w-full rounded-md border-gray-300 pl-16 pr-10 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="+1 (666) 000-0000" />
</div>
</div>
<div>
<label for="example11" class="mb-1 block text-sm font-medium text-gray-700">Price</label>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5 text-gray-500">$</div>
<div class="absolute inset-y-0 right-0 flex items-center text-gray-500">
<label for="currency" class="sr-only">Currency</label>
<select id="currency" id="currency" class="h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:border-primary-500 focus:ring-primary-500 sm:text-sm">
<option>USD</option>
<option>CAD</option>
<option>EUR</option>
</select>
</div>
<input type="text" id="example11" class="block w-full rounded-md border-gray-300 pl-8 pr-16 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="0.00" />
</div>
</div>
</div>
<div class="mx-auto max-w-xs">
<div>
<div class="relative">
<div class="absolute top-2.5 left-3 flex items-center text-gray-500">
<label for="example12" class="block text-xs font-medium text-gray-700">Full name</label>
</div>
<input type="text" id="example12" class="block w-full rounded-md border-gray-300 pt-6 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="You name" />
</div>
</div>
</div>
<div class="mx-auto max-w-xs">
<div>
<div class="relative">
<input type="text" id="example13" placeholder=" " class="peer block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" />
<label for="example13" class="peer-focus:base absolute left-2 top-0 z-10 -translate-y-2 transform bg-white px-1 text-xs text-gray-500 transition-all peer-placeholder-shown:translate-y-3 peer-placeholder-shown:text-sm peer-focus:-translate-y-2 peer-focus:text-xs peer-disabled:bg-transparent">Full name</label>
</div>
</div>
</div>
<div class="mx-auto max-w-xs space-y-5">
<input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="Default" />
<input type="text" class="block w-full border-0 border-b-2 border-gray-200 focus:border-primary-500 focus:ring-0 disabled:cursor-not-allowed disabled:text-gray-500" placeholder="Underline" />
<input type="text" class="block w-full rounded-md border-transparent bg-gray-100 focus:border-primary-400 focus:bg-white focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="Fill" />
</div>
<div class="mx-auto max-w-xs space-y-5">
<input type="text" class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="Small" />
<input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="Normal" />
<input type="text" class="block w-full rounded-md border-gray-300 py-3 text-xl shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" placeholder="Large" />
</div>