DOCUMENTATION

<div class="flex flex-wrap">
    <div class="mb-3 w-full md:w-1/3">
        <label class="inline-block mb-2 text-gray-500">First Name</label>
        <input type="text" id="uifirstname" value="Mark"class="text-gray-500 is-valid  w-full px-4 py-2 placeholder-gray-500 border border-green-400 focus:shadow rounded-md outline-none">
        <span id="uifnamelooksgood" class="text-green-500 mt-1">Looks good!</span>
    </div>
    <div class="mb-3 md:ml-4 md:w-1/3 w-full">
        <label class="inline-block mb-2 text-gray-500">Last Name</label>
        <input type="text" id="uilastname" value="Otto"class="text-gray-500 is-valid w-full px-4 py-2 placeholder-gray-500 border border-green-400 focus:shadow rounded-md outline-none">
        <span id="uilnamelooksgood" class="text-green-500 mt-1">Looks good!</span>
    </div>
    <div class="mb-3 md:ml-4 md:w-1/4 w-full">
        <label class="inline-block mb-2 text-gray-500">Username</label>
        <div class="relative flex items-stretch mb-3 ">
            <span class="flex items-center px-4 py-2 border-t border-b border-l rounded whitespace-nowrap text-gray-500"id="basic-addon1">@</span>
            <input type="email" id="uiusername"class="text-gray-500 is-invalid block w-full px-4 py-2 border border-red-500 outline-none rounded-r focus:shadow">
        </div>
        <span id="uiusererror" class="text-red-400 mt-1">Please choose a username.</span>
    </div>
</div>
<div class="flex flex-wrap">
    <div class="mb-3 md:w-2/4 w-full">
        <label class="inline-block mb-2 text-gray-500">City</label>
        <input type="text" id="uicityname"class="text-gray-500 is-invalid w-full block px-4 py-2 placeholder-gray-500 border border-red-500 focus:shadow rounded-md outline-none">
        <span id="uicityerror" class="text-red-400 mt-1">Please provide a valid city.</span>
    </div>
    <div class="mb-3 md:ml-4 md:w-1/5 w-full">
        <label class="inline-block mb-2 text-gray-500">State</label>
        <select id="uistatename"class="is-invalid1 block w-full py-2 px-4 text-gray-400 border border-red-500 rounded-lg outline-none"placeholder="choose">
            <option value="noselect" selected="">Choose</option>
            <option value="1">...</option>
        </select>
        <span id="uistateerror" class="text-red-400 mt-1">Please select a valid state.</span>
    </div>
    <div class="mb-3 md:ml-4 md:w-1/5 w-full">
        <label class="inline-block mb-2 text-gray-500">Zip</label>
        <input type="number" id="uizip"class="text-gray-500 is-invalid w-full block px-4 py-2 placeholder-gray-400 border border-red-500 focus:shadow rounded-md outline-none">
        <span id="uiziperror" class="text-red-400 mt-1">Please provide a valid zip.</span>
    </div>
</div>
<div class="mb-3 flex">
    <input class="float-left w-4 h-4 mr-2 mt-1 bg-center bg-no-repeat border border-blue-500 rounded"type="checkbox" id="uivalidationcheckbox">
    <label id="uilabel" class="text-red-400 font-medium form-check-label" for="uivalidationcheckbox">
        Agree to terms and conditions <br>
        <span id="uitandc">You must agree before submitting.</span>
    </label>
</div>
<button onclick="uivalidation()" class="inline-block px-6 py-2 mb-4 mr-4 text-center text-white bg-blue-500 border border-blue-300 rounded shadow-md ">
    Submit Form
</button>