Email Input Forms

<div> <label for="email" class="text-base font-medium text-gray-900 dark:text-gray-100"> Email address </label> <div class="mt-2.5 relative text-gray-400 focus-within:text-gray-600 dark:focus-within:text-white"> <div class="absolute inset-y-0 left-0 rtl:right-0 flex items-center pl-3 rtl:pr-3 pointer-events-none"> <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path> </svg> </div> <input type="email" name="email" id="email" placeholder="Enter email to get started" class="block w-full py-4 pl-10 pr-4 rtl:pr-10 rtl:pl-4 text-black placeholder-gray-500 transition-all duration-200 border border-gray-200 rounded-md bg-gray-50 focus:outline-none focus:border-sky-600 caret-sky-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500 invalid:ring-2 invalid:ring-red-400"> </div> </div>