Wireframe Layouts
Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.
Application

Blog

Ecommerce

General

Marketing

Social

Form shadow inputs

<form class="mx-auto max-w-sm">

  <div class="mb-5">

    <label for="email" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Your email</label>

    <input type="email" id="email" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-xs focus:border-blue-500 focus:ring-blue-500" placeholder="[email protected]" required />

  </div>

  <div class="mb-5">

    <label for="password" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Your password</label>

    <input type="password" id="password" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-xs focus:border-blue-500 focus:ring-blue-500" required />

  </div>

  <div class="mb-5">

    <label for="repeat-password" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Repeat password</label>

    <input type="password" id="repeat-password" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-xs focus:border-blue-500 focus:ring-blue-500" required />

  </div>

  <div class="mb-5 flex items-start">

    <div class="flex h-5 items-center">

      <input id="terms" type="checkbox" value="" class="h-4 w-4 rounded-sm border border-gray-300 bg-gray-50 focus:ring-3 focus:ring-blue-300" required />

    </div>

    <label for="terms" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">I agree with the <a href="#" class="text-blue-600 hover:underline">terms and conditions</a></label>

  </div>

  <button type="submit" class="rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-none">Register new account</button>

</form>