Component

Tailwind CSS input

To customise the background element's and the callback functions' custom classes, use the following settings as the second parameter for the Modal object.

An essential component of the form element is the input field, which may be used to build interactive controls to take user input in the form of text, email, numbers, passwords, URLs, phone numbers, and more.

All of the input types based on various variations, styles, colours, and sizes are available on this page, which was created using Pagedone components and Tailwind CSS utility classes.

Default Input

Use the grid layout to add more columns and rows, and use this tailwind input example as a model for a generic form element that has several input field types (text, email, password, number, URL, and phone number).

<div class="w-full relative flex flex-col gap-5">
      <div class="w-full relative">
      <div class="relative">
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>
      <div class="relative mt-3">
      <textarea class="block w-full max-w-xs h-40 px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-2xl placeholder-gray-400 focus:outline-none resize-none leading-relaxed" placeholder="Enter a description..."></textarea>
      </div>
      </div>
      <div class="w-full relative">
      <div class="relative">
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed " placeholder="name@pagedone.com" required="">
      </div>
      <div class="relative mt-3">
      <textarea class="block w-full max-w-xs h-40 px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed resize-none" placeholder="Enter a description..."></textarea>
      </div>
      </div>
      </div>

Input group

You may use this tailwind input with icon example to add more text or an informative icon inside the tailwind input box.

<div class="w-full relative flex flex-col gap-5">
      <div class="relative  text-gray-500 focus-within:text-gray-900 ">
      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none ">
      <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg" class=" stroke-current ml-1">
        <path d="M1.87651 3.83325L6.79885 7.07932C8.55702 8.13423 9.43612 8.66169 10.402 8.6387C11.3678 8.61572 12.2208 8.04705 13.9268 6.90971L18.1232 3.83325M8.33317 14.6666H11.6665C14.8092 14.6666 16.3805 14.6666 17.3569 13.6903C18.3332 12.714 18.3332 11.1426 18.3332 7.99992C18.3332 4.85722 18.3332 3.28587 17.3569 2.30956C16.3805 1.33325 14.8092 1.33325 11.6665 1.33325H8.33317C5.19047 1.33325 3.61913 1.33325 2.64281 2.30956C1.6665 3.28587 1.6665 4.85722 1.6665 7.99992C1.6665 11.1426 1.6665 12.714 2.64281 13.6903C3.61913 14.6666 5.19047 14.6666 8.33317 14.6666Z" stroke="" stroke-width="1.5" stroke-linecap="round"></path>
      </svg>
      </div>
      <input type="text" id="default-search" class="block w-full max-w-xs pr-4 pl-12 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com">
      </div>
      <div class="relative  text-gray-500 focus-within:text-gray-900 ">
      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none ">
      <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg" class=" stroke-current ml-1">
        <path d="M1.87651 3.83325L6.79885 7.07932C8.55702 8.13423 9.43612 8.66169 10.402 8.6387C11.3678 8.61572 12.2208 8.04705 13.9268 6.90971L18.1232 3.83325M8.33317 14.6666H11.6665C14.8092 14.6666 16.3805 14.6666 17.3569 13.6903C18.3332 12.714 18.3332 11.1426 18.3332 7.99992C18.3332 4.85722 18.3332 3.28587 17.3569 2.30956C16.3805 1.33325 14.8092 1.33325 11.6665 1.33325H8.33317C5.19047 1.33325 3.61913 1.33325 2.64281 2.30956C1.6665 3.28587 1.6665 4.85722 1.6665 7.99992C1.6665 11.1426 1.6665 12.714 2.64281 13.6903C3.61913 14.6666 5.19047 14.6666 8.33317 14.6666Z" stroke="" stroke-width="1.5" stroke-linecap="round"></path>
      </svg>
      </div>
      <input type="text" id="default-search" class="block w-full max-w-xs pr-4 pl-12 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com">
      </div>
      </div>

Input with select

Use this tailwind text input example to show a select menu right next to the input field.

<div class="flex gap-5 flex-col">
      <div class="relative w-full">
      <select id="countries" class="w-16 text-gray-900 text-sm rounded-lg block absolute top-0 h-10 px-4 focus:outline-none">
      <option value="US" selected>IN</option>
      <option value="CA">CA</option>
      <option value="FR">Fr</option>
      </select>
      <input type="text" class="block w-full max-w-xs pr-4 pl-20 py-2  text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="+91 000 000 0000">
      </div>
      <div class="relative w-full">
      <select id="countries" class="w-16 text-gray-900 text-sm rounded-lg block absolute top-0 h-10 px-4 focus:outline-none">
      <option value="US" selected>IN</option>
      <option value="CA">CA</option>
      <option value="FR">Fr</option>
      </select>
      <input type="text" class="block w-full max-w-xs pr-4 pl-20 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="+91 000 000 0000">
      </div>
      </div>

Use this tailwind input field example to show a dropdown menu right next to the input field.

<div class="flex flex-col gap-5">
      <div class="relative ">
      <div class=" absolute left-0 top-0 py-3 px-4">
      <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.63636 15.4545V0.90909H5.56818V15.4545H4.63636ZM7.77273 5.27273C7.70455 4.69697 7.42803 4.25 6.94318 3.93182C6.45833 3.61364 5.86364 3.45455 5.15909 3.45455C4.64394 3.45455 4.19318 3.53788 3.80682 3.70455C3.42424 3.87121 3.125 4.10038 2.90909 4.39205C2.69697 4.68371 2.59091 5.01515 2.59091 5.38636C2.59091 5.69697 2.66477 5.96401 2.8125 6.1875C2.96402 6.4072 3.1572 6.59091 3.39205 6.73864C3.62689 6.88258 3.87311 7.00189 4.13068 7.09659C4.38826 7.1875 4.625 7.26136 4.84091 7.31818L6.02273 7.63636C6.32576 7.71591 6.66288 7.82576 7.03409 7.96591C7.40909 8.10606 7.76705 8.29735 8.10795 8.53977C8.45265 8.77841 8.73674 9.08523 8.96023 9.46023C9.18371 9.83523 9.29545 10.2955 9.29545 10.8409C9.29545 11.4697 9.13068 12.0379 8.80114 12.5455C8.47538 13.053 7.99811 13.4564 7.36932 13.7557C6.74432 14.0549 5.98485 14.2045 5.09091 14.2045C4.25758 14.2045 3.53598 14.0701 2.92614 13.8011C2.32008 13.5322 1.8428 13.1572 1.49432 12.6761C1.14962 12.1951 0.954545 11.6364 0.909091 11H2.36364C2.40152 11.4394 2.54924 11.803 2.80682 12.0909C3.06818 12.375 3.39773 12.5871 3.79545 12.7273C4.19697 12.8636 4.62879 12.9318 5.09091 12.9318C5.62879 12.9318 6.11174 12.8447 6.53977 12.6705C6.9678 12.4924 7.30682 12.2462 7.55682 11.9318C7.80682 11.6136 7.93182 11.2424 7.93182 10.8182C7.93182 10.4318 7.82386 10.1174 7.60795 9.875C7.39205 9.63258 7.10795 9.43561 6.75568 9.28409C6.40341 9.13258 6.02273 9 5.61364 8.88636L4.18182 8.47727C3.27273 8.21591 2.55303 7.8428 2.02273 7.35795C1.49242 6.87311 1.22727 6.23864 1.22727 5.45455C1.22727 4.80303 1.40341 4.23485 1.75568 3.75C2.11174 3.26136 2.58902 2.88258 3.1875 2.61364C3.78977 2.34091 4.46212 2.20455 5.20455 2.20455C5.95455 2.20455 6.62121 2.33901 7.20455 2.60795C7.78788 2.87311 8.25 3.23674 8.59091 3.69886C8.93561 4.16098 9.11742 4.68561 9.13636 5.27273H7.77273Z" fill="#6B7280"></path>
      </svg>
      </div>
      <input type="text" class="block w-full max-w-xs pr-16 pl-9 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-300 focus:outline-none leading-relaxed" placeholder="6,000.00">
      <select id="countries" class="w-20 text-gray-900 text-sm rounded-lg block absolute top-0 right-3 h-10 px-4 border-l  focus:outline-none">
      <option value="USD" selected>USD</option>
      <option value="CA">CA</option>
      <option value="FR">Fr</option>
      </select>
      </div>
      <div class="relative ">
      <div class=" absolute left-0 top-0 py-3 px-4">
      <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.63636 15.4545V0.90909H5.56818V15.4545H4.63636ZM7.77273 5.27273C7.70455 4.69697 7.42803 4.25 6.94318 3.93182C6.45833 3.61364 5.86364 3.45455 5.15909 3.45455C4.64394 3.45455 4.19318 3.53788 3.80682 3.70455C3.42424 3.87121 3.125 4.10038 2.90909 4.39205C2.69697 4.68371 2.59091 5.01515 2.59091 5.38636C2.59091 5.69697 2.66477 5.96401 2.8125 6.1875C2.96402 6.4072 3.1572 6.59091 3.39205 6.73864C3.62689 6.88258 3.87311 7.00189 4.13068 7.09659C4.38826 7.1875 4.625 7.26136 4.84091 7.31818L6.02273 7.63636C6.32576 7.71591 6.66288 7.82576 7.03409 7.96591C7.40909 8.10606 7.76705 8.29735 8.10795 8.53977C8.45265 8.77841 8.73674 9.08523 8.96023 9.46023C9.18371 9.83523 9.29545 10.2955 9.29545 10.8409C9.29545 11.4697 9.13068 12.0379 8.80114 12.5455C8.47538 13.053 7.99811 13.4564 7.36932 13.7557C6.74432 14.0549 5.98485 14.2045 5.09091 14.2045C4.25758 14.2045 3.53598 14.0701 2.92614 13.8011C2.32008 13.5322 1.8428 13.1572 1.49432 12.6761C1.14962 12.1951 0.954545 11.6364 0.909091 11H2.36364C2.40152 11.4394 2.54924 11.803 2.80682 12.0909C3.06818 12.375 3.39773 12.5871 3.79545 12.7273C4.19697 12.8636 4.62879 12.9318 5.09091 12.9318C5.62879 12.9318 6.11174 12.8447 6.53977 12.6705C6.9678 12.4924 7.30682 12.2462 7.55682 11.9318C7.80682 11.6136 7.93182 11.2424 7.93182 10.8182C7.93182 10.4318 7.82386 10.1174 7.60795 9.875C7.39205 9.63258 7.10795 9.43561 6.75568 9.28409C6.40341 9.13258 6.02273 9 5.61364 8.88636L4.18182 8.47727C3.27273 8.21591 2.55303 7.8428 2.02273 7.35795C1.49242 6.87311 1.22727 6.23864 1.22727 5.45455C1.22727 4.80303 1.40341 4.23485 1.75568 3.75C2.11174 3.26136 2.58902 2.88258 3.1875 2.61364C3.78977 2.34091 4.46212 2.20455 5.20455 2.20455C5.95455 2.20455 6.62121 2.33901 7.20455 2.60795C7.78788 2.87311 8.25 3.23674 8.59091 3.69886C8.93561 4.16098 9.11742 4.68561 9.13636 5.27273H7.77273Z" fill="#6B7280"></path>
      </svg>
      </div>
      <input type="text" class="block w-full max-w-xs pr-16 pl-9 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-300 focus:outline-none leading-relaxed" placeholder="6,000.00">
      <select id="countries" class="w-20 text-gray-900 text-sm rounded-lg block absolute top-0 right-3 h-10 px-4 border-l  focus:outline-none">
        <option value="USD" selected>USD</option>
        <option value="CA">CA</option>
        <option value="FR">Fr</option>
      </select>
      </div>
      </div>

Use this tailwind input styles example to show a link right next to the input field.

https://
https:// 
<div class="flex flex-col gap-5">
      <div class="relative">
      <div class=" absolute left-0 top-0.5 py-2 text-sm h-10 px-3 text-gray-500 border-r border-gray-300"> https:// </div>
      <input type="text" class="block w-full max-w-xs pr-4 pl-20 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="www.Pagedone.com">
      </div>
      <div class="relative ">
      <div class=" absolute left-0 top-0.5 py-2 text-sm h-10 px-3 text-gray-500 border-r border-gray-300"> https:// </div>
      <input type="text" class="block w-full max-w-xs pr-4 pl-20 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="www.Pagedone.com">
      </div>
      </div>

Input with label

Use this tailwind input example to show a label with input field.

<div class="flex flex-col gap-5">
      <div class="relative">
      <label class="flex  items-center mb-2 text-gray-600 text-xs font-medium">Email <svg width="7" height="7" class="ml-1" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3.11222 6.04545L3.20668 3.94744L1.43679 5.08594L0.894886 4.14134L2.77415 3.18182L0.894886 2.2223L1.43679 1.2777L3.20668 2.41619L3.11222 0.318182H4.19105L4.09659 2.41619L5.86648 1.2777L6.40838 2.2223L4.52912 3.18182L6.40838 4.14134L5.86648 5.08594L4.09659 3.94744L4.19105 6.04545H3.11222Z" fill="#EF4444"></path></svg>
      </label>
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>
      <div class="relative">
      <label class="flex  items-center mb-2 text-gray-600 text-xs font-medium">Email <svg width="7" height="7" class="ml-1" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3.11222 6.04545L3.20668 3.94744L1.43679 5.08594L0.894886 4.14134L2.77415 3.18182L0.894886 2.2223L1.43679 1.2777L3.20668 2.41619L3.11222 0.318182H4.19105L4.09659 2.41619L5.86648 1.2777L6.40838 2.2223L4.52912 3.18182L6.40838 4.14134L5.86648 5.08594L4.09659 3.94744L4.19105 6.04545H3.11222Z" fill="#EF4444"></path></svg>
      </label>
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>
      </div>

Input with Helper text

Use this illustration to display an assistance text with links and more explanation beneath the input area.

This is a hint message.
This is a hint message. 
<div class="flex flex-col gap-8">
      <div class="block">
      <div class="relative">
      <label class="flex  items-center mb-2 text-gray-600 text-xs font-medium">Email <svg width="7" height="7" class="ml-1" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.11222 6.04545L3.20668 3.94744L1.43679 5.08594L0.894886 4.14134L2.77415 3.18182L0.894886 2.2223L1.43679 1.2777L3.20668 2.41619L3.11222 0.318182H4.19105L4.09659 2.41619L5.86648 1.2777L6.40838 2.2223L4.52912 3.18182L6.40838 4.14134L5.86648 5.08594L4.09659 3.94744L4.19105 6.04545H3.11222Z" fill="#EF4444"></path></svg>
      </label>
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>
      <span class="text-xs text-gray-400 font-normal mt-2 block">This is a hint message.</span>
      </div>
      <div class="block">
      <div class="relative">
      <label class="flex  items-center mb-2 text-gray-600 text-xs font-medium">Email <svg width="7" height="7" class="ml-1" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.11222 6.04545L3.20668 3.94744L1.43679 5.08594L0.894886 4.14134L2.77415 3.18182L0.894886 2.2223L1.43679 1.2777L3.20668 2.41619L3.11222 0.318182H4.19105L4.09659 2.41619L5.86648 1.2777L6.40838 2.2223L4.52912 3.18182L6.40838 4.14134L5.86648 5.08594L4.09659 3.94744L4.19105 6.04545H3.11222Z" fill="#EF4444"></path></svg>
      </label>
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>
      <span class="text-xs text-gray-400 font-normal mt-2 block">This is a hint message.</span>
      </div>
      </div>

Input Sizes

To set the input fields' default, small, or large size, use the tailwind input border examples below. 

<div class="relative">
      <label class="flex items-center mb-2 text-gray-600 text-sm font-medium">Tiny input </label>
      <input type="text" id="tiny-input" class="block w-full max-w-xs px-2.5 py-1.5 text-xs font-normal shadow-xs text-gray-900 bg-transparent border border-solid border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-normal" placeholder="name@pagedone.com" required="">
      <input type="text" id="tiny-input" class="block w-full max-w-xs px-2.5 py-1.5 mt-4 text-xs font-normal shadow-xs text-gray-900 bg-transparent border border-solid border-gray-300 rounded-md placeholder-gray-400 focus:outline-none leading-normal" placeholder="name@pagedone.com" required="">
      </div>
      <div class="relative">
      <label class="flex items-center mb-2 text-gray-600 text-sm font-medium">Small input </label>
      <input type="text" id="small-input" class="block w-full max-w-xs px-3.5 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      <input type="text" id="small-input" class="block w-full max-w-xs px-3.5 py-2 mt-4 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>
      <div class="relative">
      <label class="flex items-center mb-2 text-gray-600 text-sm font-medium">Medium input </label>
      <input type="text" id="Medium-input" class="block w-full max-w-sm px-4 py-2.5 text-base font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      <input type="text" id="medium-input" class="block w-full max-w-sm px-4 py-2.5 mt-4 text-base font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-xl placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>
      <div class="relative">
      <label class="flex items-center mb-2 text-gray-600 text-sm font-medium">Large input </label>
      <input type="text" id="large-input" class="block w-full max-w-sm px-5 py-3 text-lg font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      <input type="text" id="large-input" class="block w-full max-w-sm px-5 py-3 mt-4 text-lg font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-xl placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>

Disabled state

If you would like to add the disabled status to an input field, start with this example.

<div class="relative">
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-300 bg-gray-50 border border-gray-300 rounded-full  placeholder-gray-300 focus:outline-none leading-relaxed" placeholder="Disabled input" disabled="">
      <input type="text" id="default-search" class="block w-full max-w-xs mt-4 px-4 py-2 text-sm font-normal shadow-xs text-gray-300 bg-gray-50 border border-gray-300 rounded-lg  placeholder-gray-300 focus:outline-none leading-relaxed" placeholder="Disabled input" disabled="">
      </div>
      <div class="relative">
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-300 bg-gray-50 border border-gray-300 rounded-full cursor-not-allowed placeholder-gray-300 focus:outline-none leading-relaxed" placeholder="Disabled readonly input" disabled="">
      <input type="text" id="default-search" class="block w-full max-w-xs mt-4 px-4 py-2 text-sm font-normal shadow-xs text-gray-300 bg-gray-50 border border-gray-300 rounded-lg cursor-not-allowed placeholder-gray-300 focus:outline-none leading-relaxed" placeholder="Disabled readonly input" disabled="">
      </div>

Validation state

Use the following tailwind css input to apply validation styles for success and error messages.

This is an error message.
This is an success message. 
<div class="block">
      <div class="relative">
      <label class="flex  items-center mb-2 text-red-600 text-xs font-medium">Email </label>
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-red-300 rounded-full placeholder-red-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal mt-4 shadow-xs text-gray-900 bg-transparent border border-red-300 rounded-lg placeholder-red-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>
      <span class="text-xs text-red-400 font-normal mt-2 block">This is an error message.</span>
      </div>
      <div class="block">
      <div class="relative">
      <label class="flex  items-center mb-2 text-emerald-600 text-xs font-medium">Email </label>
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-emerald-300 rounded-full placeholder-emerald-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      <input type="text" id="default-search" class="block w-full max-w-xs px-4 py-2 text-sm font-normal mt-4 shadow-xs text-gray-900 bg-transparent border border-emerald-300 rounded-lg placeholder-emerald-400 focus:outline-none leading-relaxed" placeholder="name@pagedone.com" required="">
      </div>
      <span class="text-xs text-emerald-400 font-normal mt-2 block">This is an success message.</span>
      </div>