Modals

Lesson 19 Tailwind CSS

Understand the structure of a modal dialog.

Learning approach

Study the Tailwind classes in the example, run the preview, then modify the classes and observe how the design changes.

Tailwind Example

HTML + Tailwind CSS

<div class="fixed inset-0 flex items-center justify-center bg-slate-950/60 p-5">

    <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl">

        <h2 class="text-xl font-bold text-slate-900">
            Confirm Action
        </h2>

        <p class="mt-2 text-sm text-slate-500">
            Are you sure you want to continue?
        </p>

        <div class="mt-6 flex justify-end gap-3">

            <button class="rounded-lg border px-4 py-2">
                Cancel
            </button>

            <button class="rounded-lg bg-indigo-600 px-4 py-2 text-white">
                Continue
            </button>

        </div>

    </div>

</div>