Tailwind Modals Components (42)

Modals from Nightsable

Dark Unsaved Changes Confirmation Modal

A dark rounded modal dialog asking whether to save or discard unsaved changes, with a close icon, a bold heading, a supporting sentence, and Cancel and Confirm pill buttons. The lime-green Confirm button is the primary action.

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-40 fixed top-0 left-0 flex items-center justify-center w-full h-full bg-black bg-opacity-30">
  <div class="p-4">
    <div class="relative p-6 py-11 bg-blueGray-900 bg-opacity-30 max-w-lg text-center w-full rounded-5xl">
      <h3 class="mb-4 text-3xl font-medium text-white tracking-3xl">Unsaved changes</h3>
      <p class="mb-8 text-white">Do you want to save or discard changes?</p>
      <div class="flex flex-wrap justify-center -m-2">
        <div class="w-auto p-2"><a class="inline-block px-14 py-4 text-white hover:text-black font-medium tracking-2xl hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Cancel</a></div>
        <div class="w-auto p-2"><a x-on:click.prevent="modal = false" class="inline-block px-14 py-4 font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Confirm</a></div>
      </div>
      <a x-on:click.prevent="modal = false" class="absolute top-6 right-6" href="#">
        <img src="nightsable-assets/images/modals/close-icon.png">
      </a>
    </div>
  </div>
</section>

Modals from Trizzle

Tailwind CSS

Trizzle

Dark Deactivate Account Confirmation Modal

A dark-themed modal dialog asking the user to confirm account deactivation, with a red warning icon, heading, explanatory body text, and Cancel and Deactivate action buttons in a footer row. The destructive action is emphasized with a red button.

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-50 fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-gray-800 bg-opacity-80 overflow-y-auto">
  <div class="max-w-xl w-full mx-auto bg-gray-500 rounded-xl overflow-hidden">
    <div class="max-w-sm mx-auto pt-12 pb-8 px-5 text-center">
      <div class="inline-flex items-center justify-center w-12 h-12 mb-5 bg-gray-600 rounded-full">
        <svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.0005 15C11.8027 15 11.6093 15.0587 11.4449 15.1686C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8001 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4805 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47003C14.3603 2.00354 13.9802 1.61498 13.5196 1.3445C13.0591 1.07401 12.5346 0.931396 12.0005 0.931396C11.4663 0.931396 10.9419 1.07401 10.4813 1.3445C10.0207 1.61498 9.64065 2.00354 9.38046 2.47003L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0166 1.34914 19.4761C1.60883 19.9356 1.98516 20.3185 2.44014 20.5861C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0053 21.1164 20.8689 21.5784 20.6049C22.0403 20.341 22.4238 19.9589 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9814C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.626 20.7249 18.7556 20.5701 18.8453C20.4154 18.935 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.935 3.43077 18.8453C3.27599 18.7556 3.14811 18.626 3.06046 18.47C2.97269 18.318 2.92648 18.1456 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47003C11.1444 3.30623 11.2719 3.16876 11.4289 3.07277C11.5859 2.97678 11.7664 2.92599 11.9505 2.92599C12.1345 2.92599 12.315 2.97678 12.472 3.07277C12.629 3.16876 12.7565 3.30623 12.8405 3.47003L20.8905 17.47C20.9897 17.6199 21.0467 17.7937 21.0555 17.9732C21.0643 18.1527 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7.00003C11.7352 7.00003 11.4809 7.10538 11.2933 7.29292C11.1058 7.48046 11.0005 7.73481 11.0005 8.00003V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8947 11.7352 13 12.0005 13C12.2657 13 12.52 12.8947 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8.00003C13.0005 7.73481 12.8951 7.48046 12.7076 7.29292C12.52 7.10538 12.2657 7.00003 12.0005 7.00003Z" fill="#FF4842"></path>
        </svg>
      </div>
      <h4 class="text-xl text-gray-100 font-semibold mb-5">Deactivate account</h4>
      <p class="text-gray-300 font-medium">Your account is important to you. Before deactivating it, please ensure that you have backed up all of your data.</p>
    </div>
    <div class="pt-5 pb-6 px-6 text-right bg-gray-600 -mb-2">
      <a x-on:click.prevent="modal = false" class="inline-block w-full sm:w-auto py-3 px-5 mb-2 mr-4 text-center font-semibold leading-6 text-gray-200 bg-gray-500 hover:bg-gray-400 rounded-lg transition duration-200" href="#">Cancel</a>
      <a x-on:click.prevent="modal = false" class="inline-block w-full sm:w-auto py-3 px-5 mb-2 text-center font-semibold leading-6 text-blue-50 bg-red-500 hover:bg-red-600 rounded-lg transition duration-200" href="#">Deactivate</a>
    </div>
  </div>
</div>

Modals from Flex

Tailwind CSS

Flex

Ebook Product Card with Cover Image and Download Button

A single contained card showcasing a free digital book titled Milk and honey, with a cover image carousel indicator, metadata for size, page count, and last update, a Learn More link, and a green Download PDF button. The split footer separates descriptive text from file details.

<div class="fixed top-0 left-0 w-full h-full px-4 py-16 md:py-40 bg-coolGray-900 bg-opacity-50 overflow-y-auto z-50">
  <div class="max-w-3xl mx-auto bg-coolGray-50 rounded-lg overflow-hidden">
    <div class="relative">
      <img class="h-40 md:h-auto w-full object-cover" src="flex-ui-assets/images/modals/photo-modal1.png" alt="">
      <div class="absolute bottom-0 left-1/2 mb-6 transform -translate-x-1/2"><a class="inline-block w-3 h-3 mr-3 bg-coolGray-100 rounded-full" href="#"></a><a class="inline-block w-3 h-3 mr-3 bg-green-500 rounded-full" href="#"></a><a class="inline-block w-3 h-3 bg-coolGray-100 rounded-full" href="#"></a></div>
      <a class="absolute top-0 md:top-auto md:bottom-0 right-0 inline-block py-2 px-4 mt-6 mr-6 mb-6 text-sm text-green-50 font-medium leading-5 bg-yellow-500 hover:bg-yellow-600 focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 rounded-md" href="#">For free</a>
    </div>
    <div class="flex flex-wrap">
      <div class="w-full md:w-4/6 border-b md:border-b-0 md:border-r border-coolGray-100">
        <div class="py-10 pl-10 pr-8">
          <h3 class="mb-2 text-xl font-semibold text-coolGray-800 leading-7">Milk and honey</h3>
          <p class="mb-4 text-sm text-coolGray-500 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa.</p>
          <a class="inline-flex items-center text-green-500 hover:text-green-600 font-medium" href="#">
            <span class="mr-2">Learn More</span>
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.71 10.71C13.801 10.6149 13.8724 10.5028 13.92 10.38C14.02 10.1365 14.02 9.86346 13.92 9.62C13.8724 9.49725 13.801 9.3851 13.71 9.29L10.71 6.29C10.5217 6.1017 10.2663 5.99591 10 5.99591C9.7337 5.99591 9.47831 6.1017 9.29 6.29C9.1017 6.4783 8.99591 6.7337 8.99591 7C8.99591 7.2663 9.1017 7.5217 9.29 7.71L10.59 9L7 9C6.73479 9 6.48043 9.10536 6.2929 9.29289C6.10536 9.48043 6 9.73478 6 10C6 10.2652 6.10536 10.5196 6.2929 10.7071C6.48043 10.8946 6.73479 11 7 11L10.59 11L9.29 12.29C9.19628 12.383 9.12188 12.4936 9.07111 12.6154C9.02034 12.7373 8.99421 12.868 8.99421 13C8.99421 13.132 9.02034 13.2627 9.07111 13.3846C9.12188 13.5064 9.19628 13.617 9.29 13.71C9.38297 13.8037 9.49357 13.8781 9.61543 13.9289C9.73729 13.9797 9.86799 14.0058 10 14.0058C10.132 14.0058 10.2627 13.9797 10.3846 13.9289C10.5064 13.8781 10.617 13.8037 10.71 13.71L13.71 10.71ZM20 10C20 8.02219 19.4135 6.08879 18.3147 4.4443C17.2159 2.79981 15.6541 1.51808 13.8268 0.761204C11.9996 0.00432792 9.98891 -0.193706 8.0491 0.192146C6.10929 0.577999 4.32746 1.53041 2.92894 2.92893C1.53041 4.32746 0.578004 6.10929 0.192152 8.0491C-0.1937 9.98891 0.00433294 11.9996 0.761209 13.8268C1.51809 15.6541 2.79981 17.2159 4.4443 18.3147C6.08879 19.4135 8.02219 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C17.9997 16.1425 18.7363 15.0401 19.2388 13.8268C19.7413 12.6136 20 11.3132 20 10ZM2 10C2 8.41775 2.4692 6.87103 3.34825 5.55544C4.2273 4.23985 5.47673 3.21446 6.93854 2.60896C8.40035 2.00346 10.0089 1.84504 11.5607 2.15372C13.1126 2.4624 14.538 3.22433 15.6569 4.34315C16.7757 5.46197 17.5376 6.88743 17.8463 8.43928C18.155 9.99113 17.9965 11.5997 17.391 13.0615C16.7855 14.5233 15.7602 15.7727 14.4446 16.6518C13.129 17.5308 11.5823 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84286 14.1566 2 12.1217 2 10Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full md:w-2/6 pt-6 pb-10 px-8">
        <div>
          <div class="mb-10">
            <div class="flex mb-3 items-center justify-between">
              <span class="text-sm font-medium text-coolGray-500">Size</span>
              <span class="text-sm font-medium text-coolGray-900">2.5 MB</span>
            </div>
            <div class="flex mb-3 items-center justify-between">
              <span class="text-sm font-medium text-coolGray-500">Lenght</span>
              <span class="text-sm font-medium text-coolGray-900">88 Pages</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-sm font-medium text-coolGray-500">Last Update</span>
              <span class="text-sm font-medium text-coolGray-900">12 Days ago</span>
            </div>
          </div>
          <a class="inline-block py-3 px-7 w-full text-base text-green-50 font-medium text-center leading-6 bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Download PDF</a>
        </div>
      </div>
    </div>
  </div>
</div>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Modals from Pstls.

Tailwind CSS

Pstls.

Positive Success Notification Modal with Homepage Button

A centered white dialog over a gray backdrop showing a teal outlined checkmark icon, a serif heading, body text, and a black button linking back to the homepage. It communicates a success message with a single call to action.

<section class="fixed inset-0 py-24">
  <div class="container px-4 mx-auto relative z-10">
    <div class="bg-white max-w-xl mx-auto text-center py-12 md:py-16 px-6 md:px-14"><img class="block mx-auto mb-6" src="pstls-assets/icons/modal-check-circle.svg" alt="" >
      <h2 class="text-4xl font-heading mb-3" >Some positive notification</h2>
      <p class="max-w-md mx-auto leading-8 mb-10" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium sapien vitae elit ullamcorper, vel convallis tortor laoreet.</p>
      <div><a class="inline-block px-8 py-3 text-white font-bold bg-black hover:bg-gray-900" href="#" >Go back to Homepage</a></div>
    </div>
  </div>
  <div class="absolute top-0 left-0 h-full w-full bg-black bg-opacity-50"></div>
</section>

Modals from BoldUI

Tailwind CSS

BoldUI

Dark Newsletter Signup Card with Email Input

A black promotional card with a bold heading asking users to sign up for a newsletter, a short body paragraph, an email input field, and a yellow primary button alongside a secondary 'No, thanks' text link. The content is stacked vertically and left-aligned within the card.

<div class="fixed top-0 left-0 right-0 pt-20 z-50">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto">
      <div class="p-8 md:p-16 bg-black border">
        <h2 class="mb-4 text-2xl text-white font-heading">Sign up to our newsletter</h2>
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <form action="">
          <div class="mb-6">
            <input class="w-full py-4 px-6 bg-black rounded-full border text-white font-bold outline-none placeholder-white" type="email" placeholder="Type your e-mail">
          </div>
          <div class="flex flex-wrap justify-center md:justify-start">
            <a class="inline-flex justify-center w-full md:w-auto mb-6 lg:mb-0 md:mr-8 items-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
              <svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
              </svg>
              <span class="text-sm font-heading">Sign up now</span>
            </a>
            <a class="inline-flex items-center text-white hover:underline" href="#">
              <span class="mr-2 text-sm font-heading">No, thanks</span>
              <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
              </svg>
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Modals from Acros

Tailwind CSS

Acros

Newsletter Signup Form with Benefits Panel

A split-screen card with a serif heading, intro text, and an email input with a teal Sign in button on the left, and a light teal panel with an envelope icon and checklist of benefits on the right. Used to collect email addresses for a newsletter subscription.

<section class="py-12 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto p-8 bg-white rounded-md">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
          <div class="max-w-md mx-auto">
            <h2 class="max-w-xs font-heading text-3xl mb-2">Sign up to our newsletter</h2>
            <p class="max-w-xs leading-7 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <form action="">
              <div class="mb-4">
                <label class="block text-sm leading-6 mb-2" for="">Your e-mail</label>
                <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="email" placeholder="Type your email">
              </div>
              <a class="inline-block w-full py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign in</a>
            </form>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md mx-auto p-8 bg-green-50 rounded">
            <svg width="54" height="57" viewBox="0 0 54 57" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.30847 20.1856L4.24551 21.3569H4.24551L3.30847 20.1856ZM25.4623 2.4625L24.5253 1.29119V1.29119L25.4623 2.4625ZM28.5377 2.4625L27.6007 3.6338L27.6007 3.6338L28.5377 2.4625ZM50.6916 20.1856L51.6286 19.0143L50.6916 20.1856ZM28.6467 41.5965L27.6435 40.4813L27.6433 40.4815L28.6467 41.5965ZM25.3533 41.5965L26.3568 40.4815L26.3567 40.4815L25.3533 41.5965ZM50.1154 22.1077V50.4631H53.1154V22.1077H50.1154ZM46.6923 53.8862H7.30772V56.8862H46.6923V53.8862ZM3.88464 50.4631V22.1077H0.884644V50.4631H3.88464ZM4.24551 21.3569L26.3994 3.6338L24.5253 1.29119L2.37143 19.0143L4.24551 21.3569ZM27.6007 3.6338L49.7545 21.3569L51.6286 19.0143L29.4748 1.29119L27.6007 3.6338ZM26.3994 3.6338C26.7505 3.35286 27.2495 3.35286 27.6007 3.6338L29.4748 1.29119C28.028 0.133728 25.9721 0.133732 24.5253 1.29119L26.3994 3.6338ZM7.30772 53.8862C5.41721 53.8862 3.88464 52.3536 3.88464 50.4631H0.884644C0.884644 54.0105 3.76035 56.8862 7.30772 56.8862V53.8862ZM50.1154 50.4631C50.1154 52.3536 48.5828 53.8862 46.6923 53.8862V56.8862C50.2397 56.8862 53.1154 54.0105 53.1154 50.4631H50.1154ZM53.1154 22.1077C53.1154 20.9043 52.5684 19.7661 51.6286 19.0143L49.7545 21.3569C49.9826 21.5393 50.1154 21.8156 50.1154 22.1077H53.1154ZM3.88464 22.1077C3.88464 21.8156 4.01742 21.5394 4.24551 21.3569L2.37143 19.0143C1.43169 19.7661 0.884644 20.9043 0.884644 22.1077H3.88464ZM50.4103 20.0017L27.6435 40.4813L29.6499 42.7117L52.4166 22.2321L50.4103 20.0017ZM26.3567 40.4815L3.59958 20.0019L1.59279 22.2319L24.3499 42.7115L26.3567 40.4815ZM27.6433 40.4815C27.2776 40.8106 26.7225 40.8106 26.3568 40.4815L24.3499 42.7114C25.8565 44.0673 28.1436 44.0673 29.6502 42.7114L27.6433 40.4815ZM40.702 29.2419H13.2885V32.2419H40.702V29.2419ZM19.5185 36.0692L1.88389 51.3288L3.84694 53.5974L21.4816 38.3377L19.5185 36.0692ZM51.2396 52.8919L34.5415 36.191L32.42 38.3121L49.1181 55.013L51.2396 52.8919Z" fill="#80E5D3"></path>
            </svg>
            <div class="mt-12 sm:mt-18">
              <h5 class="font-medium mb-4">There are many variations:</h5>
              <ul>
                <li class="flex items-center mb-2">
                  <span class="flex-shrink-0">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.67303 10.4809L8.55765 13.3655L14.3269 7.11548" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <circle cx="9.99998" cy="10" r="8.65385" stroke="#00CBA6" stroke-width="1.5"></circle>
                    </svg>
                  </span>
                  <span class="ml-4 text-sm">It is a long established fact that a reader</span>
                </li>
                <li class="flex items-center mb-2">
                  <span class="flex-shrink-0">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.67303 10.4809L8.55765 13.3655L14.3269 7.11548" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <circle cx="9.99998" cy="10" r="8.65385" stroke="#00CBA6" stroke-width="1.5"></circle>
                    </svg>
                  </span>
                  <span class="ml-4 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                </li>
                <li class="flex items-center">
                  <span class="flex-shrink-0">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5.67303 10.4809L8.55765 13.3655L14.3269 7.11548" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <circle cx="9.99998" cy="10" r="8.65385" stroke="#00CBA6" stroke-width="1.5"></circle>
                    </svg>
                  </span>
                  <span class="ml-4 text-sm">All the Lorem Ipsum generators</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Modals from Cronos

Tailwind CSS

Cronos

Newsletter Signup Modal with Email Field

A centered white card on a dark overlay prompting users to sign up for a newsletter, containing a bold heading, short supporting text, a single email input, and a yellow Sign Up button. The layout is a vertically stacked, minimal form.

<section class="relative w-full py-48">
    <div class="bg-gray-900 bg-opacity-80 absolute inset-0"></div>
    <div class="container mx-auto px-4 relative">
        <div class="max-w-xl mx-auto">
            <div class="bg-white p-12">
                <form action="">
                    <h1 class="font-heading text-xl font-bold text-center mb-2">Sign up to our newsletter</h1>
                    <p class="text-gray-400 text-center text-sm mb-6">Lorem ipsum dolor sit amet, consectutar adipiscing elit.</p>
                    <input class="px-6 py-3 w-full border border-gray-200 placeholder-gray-400 text-sm focus:ring focus:ring-gray-200 transition duration-200 outline-none mb-6" type="text" placeholder="Type your E-Mail">
                    <button class="px-6 py-3 block text-center w-full bg-yellow-500 text-sm font-bold hover:bg-yellow-400 focus:ring focus:ring-yellow-200 transition duration-200" type="submit">Sign Up</button>
                </form>
            </div>
        </div>
    </div>
</section>

Modals from Dashy

Tailwind CSS

Dashy

Dashy onboarding modal with six use-case selection cards

A light modal dialog over a gray overlay asking what Dashy will be used for, with a close button, a 3x2 grid of selectable cards each showing an icon, label, and short description, and a gradient call-to-action button at the bottom.

<section class="fixed inset-0 z-50 flex items-center justify-center flex-wrap py-28 bg-neutral-500 bg-opacity-80 overflow-y-auto" :class="{'hidden': !open}" x-data="{ open: true }">
  <div class="container px-4 mx-auto">
    <div class="relative pt-16 pb-20 px-16 text-center bg-white rounded-xl shadow-3xl">
      <button x-on:click="open=false" class="absolute right-6 top-6 text-neutral-400 hover:text-neutral-500">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L5.46967 17.4697ZM18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L18.5303 6.53033ZM6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L6.53033 5.46967ZM17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L17.4697 18.5303ZM6.53033 18.5303L18.5303 6.53033L17.4697 5.46967L5.46967 17.4697L6.53033 18.5303ZM5.46967 6.53033L17.4697 18.5303L18.5303 17.4697L6.53033 5.46967L5.46967 6.53033Z" fill="currentColor"></path>
        </svg>
      </button>
      <h2 class="font-heading mb-2 text-4xl text-center font-bold rounded-xl">What will you be using Dashy for?</h2>
      <p class="mb-11 text-neutral-500">We’ll use this to recommend designs and templates, especially for you</p>
      <div class="flex flex-wrap mb-9 -m-3">
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M23.75 26.25V27L23.75 27L23.75 26.25ZM6.25 26.25L6.24999 27H6.25V26.25ZM3.75001 25.5C3.3358 25.5 3.00001 25.8357 3 26.25C2.99999 26.6642 3.33578 27 3.74999 27L3.75001 25.5ZM11.25 7.99997C10.8358 7.99997 10.5 8.33576 10.5 8.74997C10.5 9.16418 10.8358 9.49997 11.25 9.49997V7.99997ZM12.5 9.49997C12.9142 9.49997 13.25 9.16418 13.25 8.74997C13.25 8.33576 12.9142 7.99997 12.5 7.99997V9.49997ZM11.25 13C10.8358 13 10.5 13.3358 10.5 13.75C10.5 14.1642 10.8358 14.5 11.25 14.5V13ZM12.5 14.5C12.9142 14.5 13.25 14.1642 13.25 13.75C13.25 13.3358 12.9142 13 12.5 13V14.5ZM17.5 7.99997C17.0858 7.99997 16.75 8.33576 16.75 8.74997C16.75 9.16418 17.0858 9.49997 17.5 9.49997V7.99997ZM18.75 9.49997C19.1642 9.49997 19.5 9.16418 19.5 8.74997C19.5 8.33576 19.1642 7.99997 18.75 7.99997V9.49997ZM17.5 13C17.0858 13 16.75 13.3358 16.75 13.75C16.75 14.1642 17.0858 14.5 17.5 14.5V13ZM18.75 14.5C19.1642 14.5 19.5 14.1642 19.5 13.75C19.5 13.3358 19.1642 13 18.75 13V14.5ZM26.25 27C26.6642 27 27 26.6642 27 26.25C27 25.8357 26.6642 25.5 26.25 25.5L26.25 27ZM8.75 4.5H21.25V3H8.75V4.5ZM23 6.25V26.25H24.5V6.25H23ZM7 26.25V6.25H5.5V26.25H7ZM21.25 4.5C22.2165 4.5 23 5.2835 23 6.25H24.5C24.5 4.45507 23.0449 3 21.25 3V4.5ZM8.75 3C6.95507 3 5.5 4.45507 5.5 6.25H7C7 5.2835 7.7835 4.5 8.75 4.5V3ZM3.74999 27L6.24999 27L6.25001 25.5L3.75001 25.5L3.74999 27ZM13.75 19.5H16.25V18H13.75V19.5ZM11.25 9.49997H12.5V7.99997H11.25V9.49997ZM11.25 14.5H12.5V13H11.25V14.5ZM17.5 9.49997H18.75V7.99997H17.5V9.49997ZM17.5 14.5H18.75V13H17.5V14.5ZM16.25 19.5C16.5261 19.5 16.75 19.7238 16.75 20H18.25C18.25 18.8954 17.3546 18 16.25 18V19.5ZM13.25 20C13.25 19.7238 13.4739 19.5 13.75 19.5V18C12.6454 18 11.75 18.8954 11.75 20H13.25ZM12.5 25.5H6.25V27H12.5V25.5ZM11.75 20V26.25H13.25V20H11.75ZM23.75 27L26.25 27L26.25 25.5L23.75 25.5L23.75 27ZM23.75 25.5H17.5V27H23.75V25.5ZM17.5 25.5H12.5V27H17.5V25.5ZM16.75 20V26.25H18.25V20H16.75Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Large company</h3>
            <p class="text-neutral-500">You’re here to scale your brand and keep it consistent</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.5805 19.4194L10.0502 19.9498L10.0502 19.9498L10.5805 19.4194ZM19.4194 19.4194L19.9497 19.9498L19.9497 19.9498L19.4194 19.4194ZM11.2644 20.1033L11.7947 19.573L11.7947 19.573L11.2644 20.1033ZM12.4999 23.0862L11.7499 23.0862V23.0862H12.4999ZM18.7355 20.1033L18.2051 19.573L18.2051 19.573L18.7355 20.1033ZM17.4999 23.0862L18.2499 23.0862L18.2499 23.0862L17.4999 23.0862ZM14.9999 26.25L14.9999 25.5L14.9999 25.5L14.9999 26.25ZM12.0793 20.5C11.6651 20.5 11.3293 20.8358 11.3293 21.25C11.3293 21.6642 11.6651 22 12.0793 22V20.5ZM17.9205 22C18.3347 22 18.6705 21.6642 18.6705 21.25C18.6705 20.8358 18.3347 20.5 17.9205 20.5V22ZM15.7499 3.75C15.7499 3.33579 15.4141 3 14.9999 3C14.5857 3 14.2499 3.33579 14.2499 3.75H15.7499ZM14.2499 5C14.2499 5.41421 14.5857 5.75 14.9999 5.75C15.4141 5.75 15.7499 5.41421 15.7499 5H14.2499ZM23.4852 7.57538C23.7781 7.28249 23.7781 6.80761 23.4852 6.51472C23.1923 6.22183 22.7174 6.22183 22.4246 6.51472L23.4852 7.57538ZM21.5407 7.3986C21.2478 7.6915 21.2478 8.16637 21.5407 8.45926C21.8336 8.75216 22.3084 8.75216 22.6013 8.45926L21.5407 7.3986ZM26.25 15.7499C26.6642 15.7499 27 15.4141 27 14.9999C27 14.5857 26.6642 14.2499 26.25 14.2499V15.7499ZM25 14.2499C24.5858 14.2499 24.25 14.5857 24.25 14.9999C24.25 15.4141 24.5858 15.7499 25 15.7499V14.2499ZM5 15.7499C5.41421 15.7499 5.75 15.4141 5.75 14.9999C5.75 14.5857 5.41421 14.2499 5 14.2499V15.7499ZM3.75 14.2499C3.33579 14.2499 3 14.5857 3 14.9999C3 15.4141 3.33579 15.7499 3.75 15.7499V14.2499ZM7.39853 8.45926C7.69143 8.75216 8.1663 8.75216 8.4592 8.45926C8.75209 8.16637 8.75209 7.69149 8.4592 7.3986L7.39853 8.45926ZM7.57531 6.51472C7.28242 6.22182 6.80754 6.22182 6.51465 6.51472C6.22176 6.80761 6.22176 7.28249 6.51465 7.57538L7.57531 6.51472ZM11.1108 18.8891C8.96296 16.7412 8.96296 13.2588 11.1108 11.1109L10.0502 10.0503C7.31652 12.784 7.31652 17.2161 10.0502 19.9498L11.1108 18.8891ZM11.1108 11.1109C13.2587 8.96306 16.7411 8.96306 18.889 11.1109L19.9497 10.0503C17.216 7.31661 12.7839 7.31661 10.0502 10.0503L11.1108 11.1109ZM18.889 11.1109C21.0369 13.2588 21.0369 16.7412 18.889 18.8891L19.9497 19.9498C22.6834 17.2161 22.6834 12.784 19.9497 10.0503L18.889 11.1109ZM10.0502 19.9498L10.7341 20.6336L11.7947 19.573L11.1108 18.8891L10.0502 19.9498ZM11.7499 23.0862V23.75H13.2499V23.0862H11.7499ZM18.889 18.8891L18.2051 19.573L19.2658 20.6336L19.9497 19.9498L18.889 18.8891ZM16.7499 23.0862V23.75H18.2499V23.0862H16.7499ZM16.7499 23.75C16.7499 24.7165 15.9664 25.5 14.9999 25.5L14.9999 27C16.7949 27 18.2499 25.5449 18.2499 23.75H16.7499ZM18.2051 19.573C17.2734 20.5047 16.7499 21.7685 16.7499 23.0862L18.2499 23.0862C18.2499 22.1663 18.6154 21.2841 19.2658 20.6336L18.2051 19.573ZM11.7499 23.75C11.7499 25.5449 13.205 27 14.9999 27L14.9999 25.5C14.0334 25.5 13.2499 24.7165 13.2499 23.75H11.7499ZM10.7341 20.6336C11.3845 21.2841 11.7499 22.1663 11.7499 23.0862L13.2499 23.0862C13.2499 21.7685 12.7265 20.5047 11.7947 19.573L10.7341 20.6336ZM12.0793 22H17.9205V20.5H12.0793V22ZM14.2499 3.75V5H15.7499V3.75H14.2499ZM22.4246 6.51472L21.5407 7.3986L22.6013 8.45926L23.4852 7.57538L22.4246 6.51472ZM26.25 14.2499H25V15.7499H26.25V14.2499ZM5 14.2499H3.75V15.7499H5V14.2499ZM8.4592 7.3986L7.57531 6.51472L6.51465 7.57538L7.39853 8.45926L8.4592 7.3986Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Personal</h3>
            <p class="text-neutral-500">You’re here to make anything and everything</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.69023 6.72856L10.0805 6.08809L9.69023 6.72856ZM12.9058 5.39664L12.177 5.2197L12.9058 5.39664ZM6.72856 9.69023L6.08809 10.0805H6.08809L6.72856 9.69023ZM5.39664 12.9058L5.2197 12.177L5.39664 12.9058ZM5.39664 17.0942L5.57357 16.3654L5.39664 17.0942ZM6.72856 20.3098L6.08809 19.9195L6.72856 20.3098ZM9.69023 23.2714L10.0805 23.9119L9.69023 23.2714ZM12.9058 24.6034L13.6346 24.4264L12.9058 24.6034ZM17.0942 24.6034L17.823 24.7803L17.0942 24.6034ZM20.3098 23.2714L19.9195 23.9119L20.3098 23.2714ZM23.2714 20.3098L23.9119 19.9195L23.2714 20.3098ZM24.6034 17.0942L24.7803 17.823L24.6034 17.0942ZM24.6034 12.9058L24.4264 13.6346L24.6034 12.9058ZM23.2714 9.69023L23.9119 10.0805L23.2714 9.69023ZM20.3098 6.72856L19.9195 6.08809L20.3098 6.72856ZM17.0942 5.39664L16.3654 5.57357L17.0942 5.39664ZM9.29998 7.36904C10.9801 8.39273 13.1705 7.48544 13.6346 5.57357L12.177 5.2197C11.9525 6.14439 10.8931 6.5832 10.0805 6.08809L9.29998 7.36904ZM7.36904 9.29998C6.60258 8.04209 8.04209 6.60258 9.29998 7.36904L10.0805 6.08809C7.47967 4.50339 4.50339 7.47967 6.08809 10.0805L7.36904 9.29998ZM5.57357 13.6346C7.48544 13.1705 8.39273 10.9801 7.36904 9.29998L6.08809 10.0805C6.58321 10.8931 6.14439 11.9525 5.2197 12.177L5.57357 13.6346ZM5.57357 16.3654C4.14214 16.0179 4.14214 13.9821 5.57357 13.6346L5.2197 12.177C2.2601 12.8954 2.2601 17.1046 5.2197 17.823L5.57357 16.3654ZM7.36904 20.7C8.39273 19.0199 7.48544 16.8295 5.57357 16.3654L5.2197 17.823C6.14439 18.0475 6.58321 19.1069 6.08809 19.9195L7.36904 20.7ZM9.29999 22.631C8.04209 23.3974 6.60259 21.9579 7.36904 20.7L6.08809 19.9195C4.50339 22.5203 7.47967 25.4966 10.0805 23.9119L9.29999 22.631ZM13.6346 24.4264C13.1705 22.5146 10.9801 21.6073 9.29999 22.631L10.0805 23.9119C10.8931 23.4168 11.9525 23.8556 12.177 24.7803L13.6346 24.4264ZM16.3654 24.4264C16.0179 25.8579 13.9821 25.8579 13.6346 24.4264L12.177 24.7803C12.8955 27.7399 17.1046 27.7399 17.823 24.7803L16.3654 24.4264ZM20.7 22.631C19.0199 21.6073 16.8295 22.5146 16.3654 24.4264L17.823 24.7803C18.0475 23.8556 19.1069 23.4168 19.9195 23.9119L20.7 22.631ZM22.631 20.7C23.3974 21.9579 21.9579 23.3974 20.7 22.631L19.9195 23.9119C22.5203 25.4966 25.4966 22.5203 23.9119 19.9195L22.631 20.7ZM24.4264 16.3654C22.5146 16.8295 21.6073 19.0199 22.631 20.7L23.9119 19.9195C23.4168 19.1069 23.8556 18.0475 24.7803 17.823L24.4264 16.3654ZM24.4264 13.6346C25.8579 13.9821 25.8579 16.0179 24.4264 16.3654L24.7803 17.823C27.7399 17.1046 27.7399 12.8954 24.7803 12.177L24.4264 13.6346ZM22.631 9.29998C21.6073 10.9801 22.5146 13.1705 24.4264 13.6346L24.7803 12.177C23.8556 11.9525 23.4168 10.8931 23.9119 10.0805L22.631 9.29998ZM20.7 7.36904C21.9579 6.60259 23.3974 8.04208 22.631 9.29998L23.9119 10.0805C25.4966 7.47967 22.5203 4.50339 19.9195 6.08809L20.7 7.36904ZM16.3654 5.57357C16.8295 7.48544 19.0199 8.39273 20.7 7.36904L19.9195 6.08809C19.1069 6.58321 18.0475 6.14439 17.823 5.2197L16.3654 5.57357ZM17.823 5.2197C17.1046 2.2601 12.8955 2.2601 12.177 5.2197L13.6346 5.57357C13.9821 4.14214 16.0179 4.14214 16.3654 5.57357L17.823 5.2197ZM18 15C18 16.6569 16.6569 18 15 18V19.5C17.4853 19.5 19.5 17.4853 19.5 15H18ZM15 18C13.3431 18 12 16.6569 12 15H10.5C10.5 17.4853 12.5147 19.5 15 19.5V18ZM12 15C12 13.3431 13.3431 12 15 12V10.5C12.5147 10.5 10.5 12.5147 10.5 15H12ZM15 12C16.6569 12 18 13.3431 18 15H19.5C19.5 12.5147 17.4853 10.5 15 10.5V12Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Teacher</h3>
            <p class="text-neutral-500">You’re here to empower your students</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 12.5V11.75C4.58579 11.75 4.25 12.0858 4.25 12.5H5ZM25 12.5H25.75C25.75 12.0858 25.4142 11.75 25 11.75V12.5ZM25 26.25V27C25.4142 27 25.75 26.6642 25.75 26.25H25ZM5 26.25H4.25C4.25 26.6642 4.58579 27 5 27V26.25ZM10.75 17.5C10.75 17.0858 10.4142 16.75 10 16.75C9.58579 16.75 9.25 17.0858 9.25 17.5H10.75ZM9.25 21.25C9.25 21.6642 9.58579 22 10 22C10.4142 22 10.75 21.6642 10.75 21.25H9.25ZM15.75 17.5C15.75 17.0858 15.4142 16.75 15 16.75C14.5858 16.75 14.25 17.0858 14.25 17.5H15.75ZM14.25 21.25C14.25 21.6642 14.5858 22 15 22C15.4142 22 15.75 21.6642 15.75 21.25H14.25ZM20.75 17.5C20.75 17.0858 20.4142 16.75 20 16.75C19.5858 16.75 19.25 17.0858 19.25 17.5H20.75ZM19.25 21.25C19.25 21.6642 19.5858 22 20 22C20.4142 22 20.75 21.6642 20.75 21.25H19.25ZM3.75 25.5C3.33579 25.5 3 25.8358 3 26.25C3 26.6642 3.33579 27 3.75 27V25.5ZM26.25 27C26.6642 27 27 26.6642 27 26.25C27 25.8358 26.6642 25.5 26.25 25.5V27ZM3.75 11.75C3.33579 11.75 3 12.0858 3 12.5C3 12.9142 3.33579 13.25 3.75 13.25V11.75ZM26.25 13.25C26.6642 13.25 27 12.9142 27 12.5C27 12.0858 26.6642 11.75 26.25 11.75V13.25ZM3.4454 8.06464C3.06688 8.23287 2.89641 8.67609 3.06464 9.0546C3.23287 9.43312 3.67609 9.60359 4.0546 9.43536L3.4454 8.06464ZM15 3.75L15.3046 3.06464C15.1107 2.97845 14.8893 2.97845 14.6954 3.06464L15 3.75ZM25.9454 9.43536C26.3239 9.60359 26.7671 9.43312 26.9354 9.0546C27.1036 8.67609 26.9331 8.23287 26.5546 8.06464L25.9454 9.43536ZM5 13.25H25V11.75H5V13.25ZM24.25 12.5V26.25H25.75V12.5H24.25ZM25 25.5H5V27H25V25.5ZM5.75 26.25V12.5H4.25V26.25H5.75ZM9.25 17.5V21.25H10.75V17.5H9.25ZM14.25 17.5V21.25H15.75V17.5H14.25ZM19.25 17.5V21.25H20.75V17.5H19.25ZM3.75 27H26.25V25.5H3.75V27ZM3.75 13.25H26.25V11.75H3.75V13.25ZM4.0546 9.43536L15.3046 4.43536L14.6954 3.06464L3.4454 8.06464L4.0546 9.43536ZM14.6954 4.43536L25.9454 9.43536L26.5546 8.06464L15.3046 3.06464L14.6954 4.43536Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Small Business</h3>
            <p class="text-neutral-500">You’re here to design your brand from the ground up</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.25 25L11.7803 25.5303C11.8764 25.4342 11.9446 25.3138 11.9776 25.1819L11.25 25ZM10 26.25L9.46967 25.7197C9.25517 25.9342 9.191 26.2568 9.30709 26.537C9.42318 26.8173 9.69665 27 10 27V26.25ZM20 26.25V27C20.3033 27 20.5768 26.8173 20.6929 26.537C20.809 26.2568 20.7448 25.9342 20.5303 25.7197L20 26.25ZM18.75 25L18.0224 25.1819C18.0554 25.3138 18.1236 25.4342 18.2197 25.5303L18.75 25ZM12.9151 21.4319C13.0156 21.0301 12.7712 20.6229 12.3694 20.5224C11.9676 20.4219 11.5604 20.6663 11.4599 21.0681L12.9151 21.4319ZM18.5401 21.0681C18.4396 20.6663 18.0324 20.4219 17.6306 20.5224C17.2288 20.6229 16.9844 21.0301 17.0849 21.4319L18.5401 21.0681ZM3.75 15.5C3.33579 15.5 3 15.8358 3 16.25C3 16.6642 3.33579 17 3.75 17V15.5ZM26.25 17C26.6642 17 27 16.6642 27 16.25C27 15.8358 26.6642 15.5 26.25 15.5V17ZM6.25 4.5H23.75V3H6.25V4.5ZM25.5 6.25V18.75H27V6.25H25.5ZM23.75 20.5H6.25V22H23.75V20.5ZM4.5 18.75V6.25H3V18.75H4.5ZM6.25 20.5C5.2835 20.5 4.5 19.7165 4.5 18.75H3C3 20.5449 4.45507 22 6.25 22V20.5ZM25.5 18.75C25.5 19.7165 24.7165 20.5 23.75 20.5V22C25.5449 22 27 20.5449 27 18.75H25.5ZM23.75 4.5C24.7165 4.5 25.5 5.2835 25.5 6.25H27C27 4.45507 25.5449 3 23.75 3V4.5ZM6.25 3C4.45507 3 3 4.45507 3 6.25H4.5C4.5 5.2835 5.2835 4.5 6.25 4.5V3ZM10.7197 24.4697L9.46967 25.7197L10.5303 26.7803L11.7803 25.5303L10.7197 24.4697ZM10 27H20V25.5H10V27ZM20.5303 25.7197L19.2803 24.4697L18.2197 25.5303L19.4697 26.7803L20.5303 25.7197ZM11.4599 21.0681L10.5224 24.8181L11.9776 25.1819L12.9151 21.4319L11.4599 21.0681ZM19.4776 24.8181L18.5401 21.0681L17.0849 21.4319L18.0224 25.1819L19.4776 24.8181ZM3.75 17H26.25V15.5H3.75V17Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Student</h3>
            <p class="text-neutral-500">You’re here to impress your teachers and classmate</p>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-3">
          <div class="p-8 h-full border rounded-xl">
            <div class="flex items-center justify-center mx-auto mb-6 w-14 h-14 bg-neutral-100 rounded-full">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.39752 15.8525L5.92785 15.3221L5.39752 15.8525ZM13.3525 7.89752L13.8828 7.36719L13.3525 7.89752ZM15.0001 9.54511L14.4697 10.0754C14.6104 10.2161 14.8012 10.2951 15.0001 10.2951C15.199 10.2951 15.3898 10.2161 15.5304 10.0754L15.0001 9.54511ZM15.0001 25.455L14.4697 25.9853C14.6104 26.126 14.8012 26.205 15.0001 26.205C15.199 26.205 15.3897 26.126 15.5304 25.9853L15.0001 25.455ZM24.6025 15.8525L24.0721 15.3221L24.0721 15.3221L24.6025 15.8525ZM16.6475 7.89753L16.1172 7.3672L16.1172 7.36722L16.6475 7.89753ZM5.92785 15.3221C4.02405 13.4183 4.02405 10.3317 5.92785 8.42785L4.86719 7.36719C2.3776 9.85679 2.3776 13.8932 4.86719 16.3828L5.92785 15.3221ZM5.92785 8.42785C7.83166 6.52405 10.9183 6.52405 12.8221 8.42785L13.8828 7.36719C11.3932 4.8776 7.35679 4.8776 4.86719 7.36719L5.92785 8.42785ZM12.8221 8.42785L14.4697 10.0754L15.5304 9.01478L13.8828 7.36719L12.8221 8.42785ZM4.86719 16.3828L14.4697 25.9853L15.5304 24.9247L5.92785 15.3221L4.86719 16.3828ZM24.0721 8.42785C25.976 10.3317 25.976 13.4183 24.0721 15.3221L25.1328 16.3828C27.6224 13.8932 27.6224 9.85679 25.1328 7.36719L24.0721 8.42785ZM17.1779 8.42786C19.0817 6.52405 22.1683 6.52405 24.0721 8.42785L25.1328 7.36719C22.6432 4.8776 18.6068 4.8776 16.1172 7.3672L17.1779 8.42786ZM24.0721 15.3221L14.4697 24.9247L15.5304 25.9853L25.1328 16.3828L24.0721 15.3221ZM16.1172 7.36722L14.4697 9.01481L15.5304 10.0754L17.1779 8.42783L16.1172 7.36722Z" fill="#0C1523"></path>
              </svg>
            </div>
            <h3 class="font-heading mb-3.5 text-lg font-semibold">Non-profit or Charity</h3>
            <p class="text-neutral-500">You’re here to design for the greater good</p>
          </div>
        </div>
      </div>
      <a class="inline-flex px-6 py-4 text-sm text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">Get Started using Dashy</a>
    </div>
  </div>
</section>

Communicate to your users the need to take an action or confirm an action. Tailwind modals components will allow you to easily convey the message you want.

Browse and choose one variant from Tailwind components modals. They are UI library components created by our talented designers and coded by our development team. Don't forget to take a look at alerts and banners sections - you'll find other components with similar purpose there.

Buy a subscription to get access to the drag and drop editor, all UI libraries and code under each component.

Try demo for free - no registration needed.

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Tailwind CSS Modals Components

Framework

UI Library

Components

Modals from Nightsable

Dark Unsaved Changes Confirmation Modal

Modals from Trizzle

Dark Deactivate Account Confirmation Modal

Modals from Flex

Ebook Product Card with Cover Image and Download Button

Your next website starts here

Modals from Pstls.

Positive Success Notification Modal with Homepage Button

Modals from BoldUI

Dark Newsletter Signup Card with Email Input

Modals from Acros

Newsletter Signup Form with Benefits Panel

Modals from Cronos

Newsletter Signup Modal with Email Field

Modals from Dashy

Dashy onboarding modal with six use-case selection cards

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

Extensions

UI Components

Company

Support

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Modals Components

Framework

UI Library

Components

Modals from Nightsable

Dark Unsaved Changes Confirmation Modal

Modals from Trizzle

Dark Deactivate Account Confirmation Modal

Modals from Flex

Ebook Product Card with Cover Image and Download Button

Your next website starts here

Modals from Pstls.

Positive Success Notification Modal with Homepage Button

Modals from BoldUI

Dark Newsletter Signup Card with Email Input

Modals from Acros

Newsletter Signup Form with Benefits Panel

Modals from Cronos

Newsletter Signup Modal with Email Field

Modals from Dashy

Dashy onboarding modal with six use-case selection cards

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support