Modal Design

Explore innovative modal design ideas and techniques to enhance user experiences with intuitive and visually appealing interfaces.

Preview

Allow Notification

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio.

Show Code

<div class="w-full h-screen bg-[rgba(0,0,0,0.2)] relative">
    <div class="absolute w-[95%] sm:max-w-md -translate-x-1/2 top-4 left-1/2">
        <div class="bg-white w-full rounded-xl shadow-sm pointer-events-auto">
            <div class="flex items-center gap-x-2 p-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
                    <path
                        d="M224,71.1a8,8,0,0,1-10.78-3.42,94.13,94.13,0,0,0-33.46-36.91,8,8,0,1,1,8.54-13.54,111.46,111.46,0,0,1,39.12,43.09A8,8,0,0,1,224,71.1ZM35.71,72a8,8,0,0,0,7.1-4.32A94.13,94.13,0,0,1,76.27,30.77a8,8,0,1,0-8.54-13.54A111.46,111.46,0,0,0,28.61,60.32,8,8,0,0,0,35.71,72Zm186.1,103.94A16,16,0,0,1,208,200H167.2a40,40,0,0,1-78.4,0H48a16,16,0,0,1-13.79-24.06C43.22,160.39,48,138.28,48,112a80,80,0,0,1,160,0C208,138.27,212.78,160.38,221.81,175.94ZM150.62,200H105.38a24,24,0,0,0,45.24,0ZM208,184c-10.64-18.27-16-42.49-16-72a64,64,0,0,0-128,0c0,29.52-5.38,53.74-16,72Z"
                    ></path>
                </svg>
                <h3 class="font-medium text-xl">Allow Notification</h3>
            </div>
            <p class="px-6 text-sm font-light">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio.
            </p>
            <div class="p-6 flex items-center justify-center sm:justify-end gap-x-3">
                <button aria-label="primary action" class="bg-black text-white text-base outline-none font-medium px-4 py-1.5 rounded-md border border-black min-w-24">Allow</button>
                <button aria-label="cancel button" class="hover:bg-gray-100 duration-200 transition border border-black text-base font-medium text-black px-4 py-1.5 min-w-24 outline-none rounded-md">Dismiss</button>
            </div>
        </div>
    </div>
</div>

Preview

Description Modal Design

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?

Show Code

<div class="w-full h-screen bg-[rgba(0,0,0,0.2)] relative">
    <div class="absolute w-[95%] sm:max-w-xl -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
        <div class="bg-white w-full rounded-xl shadow-sm pointer-events-auto">
            <div class="flex items-center gap-x-2 justify-between p-6 border-b border-b-gray-200">
                <h3 class="font-bold text-2xl">Description Modal Design</h3>
                <button aria-label="close" class="hover:bg-gray-100 duration-200 rounded-lg transition h-8 w-8 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000000" viewBox="0 0 256 256">
                        <path
                            d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
                        ></path>
                    </svg>
                </button>
            </div>
            <p class="p-6 text-sm font-light">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?
            </p>
        </div>
    </div>
</div>

Preview

Action Modal Design

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?

Show Code

<div class="w-full h-screen bg-[rgba(0,0,0,0.2)] relative">
    <div class="absolute w-[95%] sm:max-w-xl -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
        <div class="bg-white w-full rounded-xl shadow-sm pointer-events-auto">
            <div class="flex items-center gap-x-2 justify-between p-6 border-b border-b-gray-200">
                <h3 class="font-bold text-2xl">Action Modal Design</h3>
                <button aria-label="close" class="hover:bg-gray-100 duration-200 rounded-lg transition h-8 w-8 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000000" viewBox="0 0 256 256">
                        <path
                            d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
                        ></path>
                    </svg>
                </button>
            </div>
            <p class="p-6 text-sm font-light">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?
            </p>
            <div class="p-6 flex items-center gap-x-4 border-t border-gray-200">
                <button aria-label="primary action" class="w-full bg-black text-white text-base outline-none font-medium px-4 py-2.5 rounded-md border border-black">Action</button>
                <button aria-label="cancel button" class="w-full hover:bg-gray-100 duration-200 transition border border-black text-base font-medium text-black px-4 py-2.5 outline-none rounded-md">Cancel</button>
            </div>
        </div>
    </div>
</div>

Preview

Scroll Modal Design

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?

Show Code

<div class="w-full h-screen mb-4 bg-[rgba(0,0,0,0.2)] relative">
    <div class="absolute flex flex-col bg-white max-h-[95%] overflow-y-auto rounded-xl w-[95%] sm:max-w-xl -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
        <div class="flex flex-[0_0_0] items-center gap-x-2 justify-between p-6 border-b border-b-gray-200">
            <h3 class="font-bold text-2xl">Scroll Modal Design</h3>
            <button aria-label="close" class="hover:bg-gray-100 duration-200 rounded-lg transition h-8 w-8 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000000" viewBox="0 0 256 256">
                    <path
                        d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
                    ></path>
                </svg>
            </button>
        </div>
        <div class="flex-[1_1_auto] overflow-y-auto">
            <p class="p-6 text-sm font-light">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?
            </p>
            <p class="p-6 text-sm font-light">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?
            </p>
            <p class="p-6 text-sm font-light">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?
            </p>
            <p class="p-6 text-sm font-light">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?
            </p>
            <p class="p-6 text-sm font-light">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?
            </p>
            <p class="p-6 text-sm font-light">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas rem aliquid sed, porro officia, architecto fugit nostrum sunt incidunt recusandae odio eos facilis! Impedit, quod ratione! Accusamus rem optio ducimus?
            </p>
        </div>
        <div class="p-6 flex-[0_0_0] flex items-center gap-x-4 border-t border-gray-200">
            <button aria-label="primary action" class="w-full bg-black text-white text-base outline-none font-medium px-4 py-2.5 border border-black rounded-md">Primary</button>
            <button aria-label="cancel button" class="w-full hover:bg-gray-100 duration-200 transition border border-black text-base font-medium text-black px-4 py-2.5 outline-none rounded-md">Cancel</button>
        </div>
    </div>
</div>

Preview

Delete Modal Design

Are you sure? you want to delete it.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quidem, eius adipisci quisquam nisi laborum ut dolor, dolore

Show Code

<div class="w-full h-screen bg-[rgba(0,0,0,0.2)] relative">
    <div class="absolute w-[95%] sm:max-w-xl -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
        <div class="bg-white w-full rounded-xl shadow-sm pointer-events-auto">
            <div class="flex flex-col items-center gap-x-2 justify-center p-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#000000" viewBox="0 0 256 256">
                    <path
                        d="M120,136V96a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,48a12,12,0,1,0-12-12A12,12,0,0,0,128,184ZM224,56v56c0,52.72-25.52,84.67-46.93,102.19-23.06,18.86-46,25.27-47,25.53a8,8,0,0,1-4.2,0c-1-.26-23.91-6.67-47-25.53C57.52,196.67,32,164.72,32,112V56A16,16,0,0,1,48,40H208A16,16,0,0,1,224,56Zm-16,0L48,56l0,56c0,37.3,13.82,67.51,41.07,89.81A128.25,128.25,0,0,0,128,223.62a129.3,129.3,0,0,0,39.41-22.2C194.34,179.16,208,149.07,208,112Z"
                    ></path>
                </svg>
                <h3 class="mt-6 text-center font-bold text-2xl">Delete Modal Design</h3>
            </div>
            <div class="px-6 text-sm font-light">
                <p class="text-center text-gray-600">Are you sure? you want to delete it.</p>
                <p class="text-center mt-2 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quidem, eius adipisci quisquam nisi laborum ut dolor, dolore</p>
            </div>
            <div class="p-6 mt-6 flex items-center gap-x-4 border-t border-gray-200 justify-center">
                <button aria-label="primary action" class="bg-black text-white border-black text-base outline-none min-w-24 font-medium px-4 py-2 rounded-md">Delete</button>
                <button aria-label="cancel button" class="hover:bg-gray-100 duration-200 transition border border-black text-base font-medium text-black min-w-24 px-4 py-2 outline-none rounded-md">Cancel</button>
            </div>
        </div>
    </div>
</div>

Preview

Sign In

Don’t have an account yet? Sign up here

Sign in with Google

OR

Forgot Password?

Show Code

<div class="w-full h-screen mb-4 bg-[rgba(0,0,0,0.2)] relative">
    <div class="absolute w-[95%] sm:max-w-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
        <div class="bg-white relative w-full rounded-xl shadow-sm pointer-events-auto">
            <div class="flex max-w-sm mx-auto flex-col items-center gap-x-2 justify-center px-4 sm:px-6 pb-6 pt-14 sm:py-14">
                <h3 class="text-center font-bold text-3xl">Sign In</h3>
                <button aria-label="close" class="absolute top-4 right-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
                        <path
                            d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
                        ></path>
                    </svg>
                </button>
                <p class="text-center mt-2 text-gray-600">Don't have an account yet? <a class="cursor-pointer text-blue-600">Sign up</a> here</p>
                 <a href="/" class="flex mt-5 hover:bg-gray-100 duration-200 w-full transition items-center justify-center border border-gray-200 rounded-lg">
                <div class="py-2 mr-3">
                  <svg class="w-6 h-6" viewBox="0 0 40 40">
                    <path
                      d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
                      fill="#FFC107"
                    />
                    <path
                      d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z"
                      fill="#FF3D00"
                    />
                    <path
                      d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z"
                      fill="#4CAF50"
                    />
                    <path
                      d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
                      fill="#1976D2"
                    />
                  </svg>
                </div>

                <span class="text-sm font-medium text-center">Sign in with Google</span>
              </a>
              <p class="flex text-gray-500 font-normal text-sm justify-center mt-3">OR</p>
                <div class="grid gap-4 w-full mt-4">
                    <input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full rounded-lg font-light text-sm border border-gray-200 outline-none" placeholder="jon@gmail.com" />

                    <input type="password" name="password" id="password" autocomplete="password" class="py-3 px-4 block w-full rounded-lg font-light text-sm border border-gray-200 outline-none" placeholder="******" />
                    <div class="flex justify-end">
                        <a class="cursor-pointer text-blue-600 text-sm">Forgot Password?</a>
                    </div>
                    <button class="mt-3 bg-black border border-black text-white p-2.5 rounded-lg">Sign in</button>
                </div>
            </div>
        </div>
    </div>
</div>

900+ Tailwind UI Components

Stay in the loop with everything you need to know.

Check Now