<!-- JS -->
<script src="assets/js/pages/validation.init.js"></script>
<form id="form-validation" class="form">
<div class="mb-2">
<label for="username" class="font-medium text-sm text-slate-600 dark:text-slate-400">Username</label>
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" type="text" id="username" placeholder="Enter Username">
<small>Error Message</small>
</div>
<div class="mb-2">
<label for="email" class="font-medium text-sm text-slate-600 dark:text-slate-400">Email</label>
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" type="text" id="email" placeholder="Enter email">
<small>Error Message</small>
</div>
<div class="mb-2">
<label for="password" class="font-medium text-sm text-slate-600 dark:text-slate-400">Password</label>
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" type="password" id="password" placeholder="Enter password">
<small>Error Message</small>
</div>
<div class="mb-2">
<label for="password2" class="font-medium text-sm text-slate-600 dark:text-slate-400">Confirm Password</label>
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" type="password" id="password2" placeholder="Enter password again">
<small>Error Message</small>
</div>
<button type="submit" class="mt-2 inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded">Submit form</button>
</form><!--end form-->
<!-- JS -->
<script src="assets/js/pages/validation.init.js"></script>
<div id="error_message" class="bg-red-400 text-white mb-3 rounded ease-out duration-500"></div>
<form action="" id="myform" method="get" onsubmit = "return validate();">
<div class="mb-2 input_field">
<label for="name" class="font-medium text-sm text-slate-600 dark:text-slate-400">Username</label>
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" type="text" id="name" placeholder="Username">
</div>
<div class="mb-2 input_field">
<label for="subject" class="font-medium text-sm text-slate-600 dark:text-slate-400">Subject</label>
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" type="text" id="subject" placeholder="Subject">
</div>
<div class="mb-2 input_field">
<label for="phone" class="font-medium text-sm text-slate-600 dark:text-slate-400">Phone No</label>
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" type="text" id="phone" placeholder="Phone">
</div>
<div class="mb-2 input_field">
<label for="email" class="font-medium text-sm text-slate-600 dark:text-slate-400">Email</label>
<input class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" type="email" id="email" placeholder="Email">
</div>
<div class="input_field mb-2">
<label for="massage" class="font-medium text-sm text-slate-600 dark:text-slate-400">Massage</label>
<textarea id="message" rows="4" class="form-input w-full rounded-md mt-1 border border-slate-300/60 dark:border-slate-700 dark:text-slate-300 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-slate-400 focus:border-primary-500 dark:focus:border-primary-500 dark:hover:border-slate-700" placeholder="Leave a comment..."></textarea>
</div>
<button type="submit" class="inline-block focus:outline-none text-brand-500 hover:bg-brand-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-brand-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-brand-500 text-sm font-medium py-1 px-3 rounded">Submit form</button>
</form>