TailwindCSS form elements

Login Form

1179 × 333 
<div class="flex items-center justify-center min-h-full">
    <aside class="w-full max-w-sm p-6 m-4 transition bg-white shadow-lg rounded-2xl hover:shadow-xl">
        <h3 class="text-2xl font-bold text-center mb-e4">Login form</h3>
        <form action="#3">
            <div class="mb-4 last:mb-0">
                <div class="relative mb-6">
                    <label for="userName" class="hidden">User name</label>
                    <input id="userName" type="email" placeholder="Email" class="w-full leading-none transition outline-none focus:outline-none flex items-center shadow-sm  border placeholder-opacity-40  bg-white border-gray-200 hover:border-gray-300 focus:ring-2 ring-blue-400 ring-opacity-50 text-gray-700 placeholder-gray-700   h-10 px-4 text-base rounded  " />
                    <div class="absolute left-0 w-full pr-1 mt-1 text-xs leading-none text-right text-red-500 top-full">
                        <div class="hidden">Field is required</div>
                    </div>
                </div>
            </div>
            <div class="mb-4 last:mb-0">
                <div class="relative mb-6">
                    <label for="userPassword" class="hidden">User password</label>
                    <input id="userPassword" type="password" placeholder="Password" class="w-full leading-none transition outline-none focus:outline-none flex items-center shadow-sm  border placeholder-opacity-40  bg-white border-gray-200 hover:border-gray-300 focus:ring-2 ring-blue-400 ring-opacity-50 text-gray-700 placeholder-gray-700   h-10 px-4 text-base rounded  " />
                    <div class="absolute left-0 w-full pr-1 mt-1 text-xs leading-none text-right text-red-500 top-full">
                        <div class="hidden">Field is required</div>
                    </div>
                </div>
            </div>
            <div class="flex justify-end mb-4 last:mb-0">
                <div class="mr-4 last:mr-0">
                    <button class=" inline-flex items-center no-underline transition leading-none select-none outline-none focus:outline-none relative border border-blue-400 text-blue-400  focus:ring-2 ring-blue-400 ring-opacity-50 hover:bg-blue-400 active:bg-blue-500 hover:text-white active:translate-y-0.5   h-10 px-4 text-base rounded  ">
                        Cancel
                    </button>
                </div>
                <div class="mr-4 last:mr-0">

                    <button class="inline-flex items-center no-underline transition leading-none select-none outline-none focus:outline-none relative text-white focus:ring-2 ring-blue-400 ring-opacity-50 bg-blue-400 hover:bg-blue-500 active:bg-blue-600 active:translate-y-0.5 h-10 px-4 text-base rounded ">
                        Login
                    </button>
                </div>
            </div>
        </form>
    </aside>
</div>
 
<div class="flex items-center justify-center min-h-full">
  <aside class="w-full max-w-sm p-6 m-4 transition bg-white shadow-lg rounded-2xl hover:shadow-xl">
    <h3 class="text-2xl font-bold text-center mb-e4">Login form</h3>
    <form action="#3">
      <div class="mb-4 last:mb-0">
        {% render '@input-theme1', inputs.userName, true %}
      </div>
      <div class="mb-4 last:mb-0">
        {% render '@input-theme1', inputs.userPassword, true %}
      </div>
      <div class="flex justify-end mb-4 last:mb-0">
        <div class="mr-4 last:mr-0">
          {% render '@button-outlined', buttons.cancel, true %}
        </div>
        <div class="mr-4 last:mr-0">
          {% render '@button-filled', buttons.success, true %}
        </div>
      </div>
    </form>
  </aside>
</div>
 
{
  "inputs": {
    "userName": {
      "labelName": "userName",
      "itemLabel": "User name",
      "placeholder": "Email",
      "type": "email"
    },
    "userPassword": {
      "labelName": "userPassword",
      "itemLabel": "User password",
      "placeholder": "Password",
      "type": "password"
    }
  },
  "buttons": {
    "success": {
      "label": "Login"
    },
    "cancel": {
      "label": "Cancel"
    }
  }
}

No notes defined.