*Build an Admin Dashboard — chapter 4 of 4.* Inputs, validation, overlay.

What you will build#

The modal pattern.

Step by step#

example
html
<div class="fixed inset-0 z-50 grid place-items-center bg-black/50 p-4">
  <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl">
    <h2 class="font-bold">New project</h2>
    <input class="mt-4 w-full rounded-lg border px-3 py-2 focus:ring-2 focus:ring-blue-500 outline-none" placeholder="Name" />
    <div class="mt-6 flex justify-end gap-3"><button class="px-4 py-2 border rounded-lg">Cancel</button><button class="px-4 py-2 bg-blue-600 text-white rounded-lg">Create</button></div>
  </div>
</div>

Why it works#

fixed inset-0 + grid place-items-center centers any modal in one line.

Try it yourself#

  • Add form validation colors
  • Add close X
  • Add entrance animation

Series navigation#

tutorials/index|All tutorials · tutorials/dashboard/data-table|← The data table