Tailwind Forms - Riva Dashboard Tailwind

Discover 4 Tailwind Forms available in Riva Dashboard Tailwind

Form Contact

Component from Riva Dashboard Tailwind Builder
<div class="relative flex-[1_auto] flex flex-col break-words min-w-0 bg-clip-border rounded-xl border border-dashed border-stone-200 bg-white mb-5 draggable">
  <!-- card body  -->
  <div class="flex-auto block py-8 px-9">
    <form action="#" method="post" class="group/form">
      <div class="flex flex-col mb-9">
        <h1 class="font-semibold text-3xl text-dark mb-2 font-display">Contact Us</h1>
        <span class="text-lg font-medium text-muted block"> Feel free to reach out to us with any questions or inquiries. We'll be happy to assist you! </span>
      </div>
      <div class="flex flex-wrap mb-5 -mx-3">
        <div class="w-1/2 px-3">
          <label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Name"> Full Name </label>
          <input type="text" name="Name" id="Name" value="" class="peer w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your full name" required="">
        </div>
        <div class="w-1/2 px-3">
          <label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Email"> Email Address </label>
          <input type="email" name="Email" id="Email" class="peer w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your email address" required="">
        </div>
      </div>
      <div class="w-full mb-5">
        <label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Subject"> Subject </label>
        <input type="text" name="Subject" id="Subject" class="w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter the subject">
      </div>
      <div class="w-full mb-10">
        <label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Message"> Message </label>
        <textarea rows="6" type="text" name="Message" id="Message" class="w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your message"></textarea>
      </div>
      <div class="text-end">
        <button class="inline-block text-base font-medium leading-normal text-center align-middle cursor-pointer rounded-xl transition-colors duration-150 ease-in-out text-white bg-dark shadow-none border-0 px-5 py-4 hover:bg-dark-dark active:bg-dark-dark focus:bg-dark-dark ms-auto" type="submit">Send Message</button>
      </div>
    </form>
  </div>
</div>

Register Form

Form Application

Login Form