Regular bordered input.
<div class="w-full"><div class="mb-3 pt-0"><input placeholder="Regular bordered input" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div></div>
Regular left icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-heart"></i></span><input placeholder="Regular left icon bordered input" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div></div>
Regular right icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><input placeholder="Regular right icon bordered input" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pr-10 "><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 right-0"><i class="fas fa-heart"></i></span></div></div>
Small bordered input.
<div class="w-full"><div class="mb-3 pt-0"><input placeholder="Simple bordered input" class="border-blueGray-300 px-2 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div></div>
Small left icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-heart"></i></span><input placeholder="Small left icon bordered input" class="border-blueGray-300 px-2 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div></div>
Small right icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><input placeholder="Small right icon bordered input" class="border-blueGray-300 px-2 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pr-10 "><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 right-0"><i class="fas fa-heart"></i></span></div></div>
Large bordered input.
<div class="w-full"><div class="mb-3 pt-0"><input placeholder="Large bordered input" class="border-blueGray-300 px-3 py-3 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div></div>
Large left icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-heart"></i></span><input placeholder="Large left icon bordered input" class="border-blueGray-300 px-3 py-3 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div></div>
Large right icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><input placeholder="Large right icon bordered input" class="border-blueGray-300 px-3 py-3 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pr-10 "><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 right-0"><i class="fas fa-heart"></i></span></div></div>
Regular bordered input.
<div class="w-full"><div class="mb-3 pt-0"><input placeholder="Regular bordered input" class="border-transparent shadow px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div></div>
Regular left icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-heart"></i></span><input placeholder="Regular left icon bordered input" class="border-transparent shadow px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div></div>
Regular right icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><input placeholder="Regular right icon bordered input" class="border-transparent shadow px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pr-10 "><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 right-0"><i class="fas fa-heart"></i></span></div></div>
Small bordered input.
<div class="w-full"><div class="mb-3 pt-0"><input placeholder="Simple bordered input" class="border-transparent shadow px-2 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div></div>
Small left icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-heart"></i></span><input placeholder="Small left icon bordered input" class="border-transparent shadow px-2 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div></div>
Small right icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><input placeholder="Small right icon bordered input" class="border-transparent shadow px-2 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pr-10 "><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 right-0"><i class="fas fa-heart"></i></span></div></div>
Large bordered input.
<div class="w-full"><div class="mb-3 pt-0"><input placeholder="Large bordered input" class="border-transparent shadow px-3 py-3 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></div></div>
Large left icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 pl-3"><i class="fas fa-heart"></i></span><input placeholder="Large left icon bordered input" class="border-transparent shadow px-3 py-3 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pl-10 "></div></div>
Large right icon bordered input.
<div class="w-full"><div class="relative flex w-full flex-wrap items-stretch mb-3"><input placeholder="Large right icon bordered input" class="border-transparent shadow px-3 py-3 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 pr-10 "><span class="z-10 h-full flex absolute text-center text-blueGray-300 text-sm items-center w-8 right-0"><i class="fas fa-heart"></i></span></div></div>
Textarea.
<div class="w-full"><div class="mb-3 pt-0"><textarea placeholder="Textarea bordered" rows="5" type="textarea" class="border-blueGray-300 px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></textarea></div></div>
Textarea.
<div class="w-full"><div class="mb-3 pt-0"><textarea placeholder="Textarea borderless" rows="5" type="textarea" class="border-transparent shadow px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200 "></textarea></div></div>