Sign Up Get Started - Tailwind Component

The simple design sign up form for websites, it is use Tailwind CSS to create this beautiful sign up form tailwind component.
forms
Loading component...
index.html
56 lines
<section class="grid place-items-center h-screen py-0 sm:py-8">
  <div class="flex flex-col px-2 py-4 bg-white rounded-md shadow-lg w-4/5 sm:max-w-md sm:px-5">
    <div class="flex-1 items-center mx-auto">
      <div class="w-full grid grid-cols-6 my-4 bg-gradient-to-r from-indigo-600 to-indigo-500 overflow-hidden rounded-xl shadow-md group
      hover:bg-gradient-to-r hover:from-indigo-700 hover:to-indigo-600">
        <div class="col-end-7 col-span-2">
           <div class="h-20 w-20 bg-indigo-300 rounded-full -mr-5 -mt-5 float-right transform-gpu group-hover:-translate-x-0.5
           group-hover:translate-y-0.5 transition-all duration-150 group-hover:bg-indigo-400"> </div>
        </div>
        <div class="col-start-1 col-end-3 flex flex-row bottom-0 mt-16">
          <div class="flex w-32 h-24 bg-indigo-300 group-hover:bg-indigo-500 ml-8"></div>
         <div class="flex w-24 h-20 bg-indigo-500 group-hover:bg-indigo-300 mt-4"></div>
        </div>
      </div>
    </div>
    <div class="flex-1 px-2">
      <h3 class=" text-black text-2xl font-medium">Get Started</h3>
      <small class="text-sm text-gray-400 mb-2">Create an account to get started.</small>
      <form action="#" class="my-4">
        <label for="email" class="block">
          <span class="block font-medium text-sm m-1 text-gray-700 after:content-['*'] after:ml-0.5 after:text-red-500">Email</span>
          <input type="email" id="email" placeholder="Input email..."
          class="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500
          focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm
          invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 peer">
          <p class="text-xs m-1 text-pink-700 invisible peer-invalid:visible">Invalid email</p>
        </label>
        <label for="password" class="block">
          <span class="block font-medium text-sm m-1 text-gray-700 after:content-['*'] after:ml-0.5 after:text-red-500">Password</span>
          <input type="password" id="password" placeholder="Input password..." minlength="5"
          class="px-3 py-2 border shadow-sm border-gray-300 rounded-md w-full block placeholder:text-gray-400 placeholder-gray-500
          focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm
          invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 peer">
          <p class="text-xs m-1 text-pink-700 invisible peer-invalid:visible">less than 5 characters</p>
        </label>
          <button type="button"
            class="w-full inline-flex items-center justify-center text-gray-100  font-medium leading-none
             bg-indigo-600 rounded-lg py-3 px-8 border border-transparent transform-gpu hover:-translate-y-0.5 
             transition-all duration-150 hover:text-gray-200 hover:bg-indigo-700 text-sm sm:text-base">
            Create account
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </button>
     
      </form>
    </div>
  </section>
</main>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

    body{
      font-family: 'Poppins', sans-serif;
    }
</style>
Sign Up Get Started - Tailwind Component

Preview - Sign Up Get Started - Tailwind Component
