Components

Tailwind CSS modal

Use the tailwind modal component, which comes in a variety of sizes, colours, and styles, to display interactive dialogues and notifications to visitors to your website.

image

Requires Pagedone JS

This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.

Using form elements, you can use the modal component to collect information from your website's users and display notifications above the main content area.

Start with creating designs in a variety of sizes, hues, and styles using the Tailwind CSS utility classes and components.

Default modal

With Tailwind CSS, all you need to do to create a modal you can utilise the following data properties,

  • Firstly addmodal-button class to button element
  • Add data-modal-target="modalId" data attribute, where modalId is the ID of the modal you want to target.
 <div class="w-full relative">
<button type="button" class="modal-button py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-pd-overlay="#pd-basic-modal" data-modal-target="pd-basic-modal" data-modal-toggle="pd-basic-modal"> Default modal </button>
<div id="pd-basic-modal" class="pd-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto ">
<div class="opacity-0  ease-out  sm:max-w-lg sm:w-full m-5 sm:mx-auto modal-open:opacity-100 transition-all modal-open:duration-500">
 <div class="flex flex-col bg-white rounded-2xl py-4 px-5">
   <div class="flex justify-between items-center pb-4 border-b border-gray-200">
     <h4 class="text-sm text-gray-900 font-medium">Modal simple</h4>
     <button class="block cursor-pointer close-modal-button" data-pd-overlay="#pd-basic-modal" data-modal-target="pd-basic-modal">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.75732 7.75739L16.2426 16.2427M16.2426 7.75739L7.75732 16.2427" stroke="black" stroke-width="1.6" stroke-linecap="round"></path>
       </svg>
     </button>
   </div>
   <div class="overflow-y-auto py-4 min-h-[100px]">
     <p class=" text-gray-600 text-sm"> This is the regular modal with supporting text below as additional content </p>
   </div>
   <div class="flex items-center justify-end pt-4 border-t border-gray-200 space-x-4">
     <button type="button" class="pd-dropdown-toggle py-2.5 px-5 text-xs bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100 close-modal-button" data-pd-overlay="#pd-basic-modal" data-modal-target="pd-basic-modal">Cancel</button>
     <button type="button" class="py-2.5 px-5 text-xs  bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 close-modal-button" data-pd-overlay="#pd-basic-modal" data-modal-target="pd-basic-modal">Okay, got it</button>
   </div>
 </div>
</div>
</div>
<div id="backdrop" class="fixed hidden top-0 left-0 w-full h-full bg-black/50 z-[50]"></div>
</div>

Slide down animation modal

Use this tailwind modal animation component to add slide down animation to modal element in which modal open from top to bottom

 <div class="w-full relative">
<button type="button" class="modal-button py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-pd-overlay="#pd-slide-down-modal" data-modal-target="pd-slide-down-modal" data-modal-toggle="pd-slide-down-modal"> Open modal </button>
<div id="pd-slide-down-modal" class="pd-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
<div class="transform -translate-y-3 opacity-0  ease-out  sm:max-w-lg sm:w-full m-5 sm:mx-auto modal-open:translate-y-0 modal-open:opacity-100 transition-all modal-open:duration-500">
 <div class="flex flex-col bg-white rounded-2xl py-4 px-5">
   <div class="flex justify-between items-center pb-4 border-b border-gray-200">
     <h4 class="text-sm text-gray-900 font-medium">Modal simple</h4>
     <button class="block cursor-pointer close-modal-button" data-pd-overlay="#pd-slide-down-modal" data-modal-target="pd-slide-down-modal">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.75732 7.75739L16.2426 16.2427M16.2426 7.75739L7.75732 16.2427" stroke="black" stroke-width="1.6" stroke-linecap="round"></path>
       </svg>
     </button>
   </div>
   <div class="overflow-y-auto py-4 min-h-[100px]">
     <p class=" text-gray-600 text-sm"> This is the regular modal with supporting text below as additional content </p>
   </div>
   <div class="flex items-center justify-end pt-4 border-t border-gray-200 space-x-4">
     <button type="button" class="py-2.5 px-5 text-xs bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100 close-modal-button" data-pd-overlay="#pd-slide-down-modal" data-modal-target="pd-slide-down-modal">Cancel</button>
     <button type="button" class="py-2.5 px-5 text-xs  bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 close-modal-button" data-pd-overlay="#pd-slide-down-modal" data-modal-target="pd-slide-down-modal">Okay, got it</button>
   </div>
 </div>
</div>
</div>
</div>

Slide up animation modal

Use this tailwimd modal popup to add slide up animation to modal element in which modal open from bottom to top

 <div class="w-full relative">
<button type="button" class="modal-button py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-pd-overlay="#pd-slide-up-modal" data-modal-target="pd-slide-up-modal" data-modal-toggle="pd-slide-up-modal"> Open modal </button>
<div id="pd-slide-up-modal" class="pd-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
<div class="transform translate-y-3 opacity-0  ease-out  sm:max-w-lg sm:w-full m-5 sm:mx-auto modal-open:translate-y-0 modal-open:opacity-100 transition-all modal-open:duration-500">
 <div class="flex flex-col bg-white rounded-2xl py-4 px-5">
   <div class="flex justify-between items-center pb-4 border-b border-gray-200">
     <h4 class="text-sm text-gray-900 font-medium">Modal simple</h4>
     <button class="block cursor-pointer close-modal-button" data-pd-overlay="#pd-slide-up-modal" data-modal-target="pd-slide-up-modal">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.75732 7.75739L16.2426 16.2427M16.2426 7.75739L7.75732 16.2427" stroke="black" stroke-width="1.6" stroke-linecap="round"></path>
       </svg>
     </button>
   </div>
   <div class="overflow-y-auto py-4 min-h-[100px]">
     <p class=" text-gray-600 text-sm"> This is the regular modal with supporting text below as additional content </p>
   </div>
   <div class="flex items-center justify-end pt-4 border-t border-gray-200 space-x-4">
     <button type="button" class="pd-dropdown-toggle py-2.5 px-5 text-xs bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100 close-modal-button" data-pd-overlay="#pd-slide-up-modal" data-modal-target="pd-slide-up-modal">Cancel</button>
     <button type="button" class="py-2.5 px-5 text-xs  bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 close-modal-button" data-pd-overlay="#pd-slide-up-modal" data-modal-target="pd-slide-up-modal">Okay, got it</button>
   </div>
 </div>
</div>
</div>
</div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Sizes

The width of these modals will not change when seen on smaller devices, despite the fact that you have four distinct modal sizing options, ranging from small to extra big.Use follwoing tailwind modal example for sizes.

 <div class="w-full relative">
<!--small-->
<button type="button" class="modal-button py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-pd-overlay="#small-modal" data-modal-target="small-modal" data-modal-toggle="small-modal"> Small </button>
<div id="small-modal" class="pd-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto ">
<div class="opacity-0  ease-out modal-open:opacity-100 transition-all modal-open:duration-500 sm:max-w-lg sm:w-full m-5 sm:mx-auto">
  <div class="flex flex-col bg-white rounded-2xl py-4 px-5">
    <div class="flex justify-between items-center pb-4 border-b border-gray-200">
      <h4 class="text-sm text-gray-900 font-medium">Modal simple</h4>
      <button class="block cursor-pointer close-modal-button" data-pd-overlay="#small-modal" data-modal-target="small-modal">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.75732 7.75739L16.2426 16.2427M16.2426 7.75739L7.75732 16.2427" stroke="black" stroke-width="1.6" stroke-linecap="round"></path>
        </svg>
      </button>
    </div>
    <div class="overflow-y-auto py-4 min-h-[100px]">
      <p class=" text-gray-600 text-sm"> This is the regular modal with supporting text below as additional content </p>
    </div>
    <div class="flex items-center justify-end pt-4 border-t border-gray-200 space-x-4">
      <button type="button" class="py-2.5 px-5 text-xs bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100 close-modal-button" data-pd-overlay="#small-modal" data-modal-target="small-modal">Cancel</button>
      <button type="button" class="py-2.5 px-5 text-xs  bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 close-modal-button" data-pd-overlay="#small-modal" data-modal-target="small-modal">Okay, got it</button>
    </div>
  </div>
</div>
</div>
<!--medium-->
<button type="button" class="modal-button py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-pd-overlay="#medium-modal" data-modal-target="medium-modal" data-modal-toggle="medium-modal"> Medium </button>
<div id="medium-modal" class="pd-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
<div class="opacity-0  ease-out  modal-open:opacity-100 transition-all modal-open:duration-500 md:max-w-2xl md:w-full m-3 md:mx-auto">
  <div class="flex flex-col bg-white rounded-2xl py-4 px-5">
    <div class="flex justify-between items-center pb-4 border-b border-gray-200">
      <h4 class="text-sm text-gray-900 font-medium">Modal simple</h4>
      <button class="block cursor-pointer  close-modal-button" data-pd-overlay="#medium-modal" data-modal-target="medium-modal">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.75732 7.75739L16.2426 16.2427M16.2426 7.75739L7.75732 16.2427" stroke="black" stroke-width="1.6" stroke-linecap="round"></path>
        </svg>
      </button>
    </div>
    <div class="overflow-y-auto py-4 min-h-[100px]">
      <p class=" text-gray-600 text-sm"> This is the regular modal with supporting text below as additional content </p>
    </div>
    <div class="flex items-center justify-end pt-4 border-t border-gray-200 space-x-4">
      <button type="button" class="py-2.5 px-5 text-xs bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100 close-modal-button" data-pd-overlay="#medium-modal" data-modal-target="medium-modal">Cancel</button>
      <button type="button" class="py-2.5 px-5 text-xs  bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 close-modal-button" data-pd-overlay="#medium-modal" data-modal-target="medium-modal">Okay, got it</button>
    </div>
  </div>
</div>
</div>
<!--large-->
<button type="button" class="modal-button py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-pd-overlay="#large-modal" data-modal-target="large-modal" data-modal-toggle="large-modal"> Large </button>
<div id="large-modal" class="pd-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
<div class=" opacity-0 ease-out modal-open:opacity-100 transition-all modal-open:duration-500 lg:max-w-4xl lg:w-full m-3 lg:mx-auto">
  <div class="flex flex-col bg-white rounded-2xl py-4 px-5">
    <div class="flex justify-between items-center pb-4 border-b border-gray-200">
      <h4 class="text-sm text-gray-900 font-medium">Modal simple</h4>
      <button class="block cursor-pointer close-modal-button" data-pd-overlay="#large-modal" data-modal-target="large-modal">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.75732 7.75739L16.2426 16.2427M16.2426 7.75739L7.75732 16.2427" stroke="black" stroke-width="1.6" stroke-linecap="round"></path>
        </svg>
      </button>
    </div>
    <div class="overflow-y-auto py-4 min-h-[100px]">
      <p class=" text-gray-600 text-sm"> This is the regular modal with supporting text below as additional content </p>
    </div>
    <div class="flex items-center justify-end pt-4 border-t border-gray-200 space-x-4">
      <button type="button" class="py-2.5 px-5 text-xs bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100 close-modal-button" data-pd-overlay="#large-modal" data-modal-target="large-modal">Cancel</button>
      <button type="button" class="py-2.5 px-5 text-xs  bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 close-modal-button" data-pd-overlay="#large-modal" data-modal-target="large-modal">Okay, got it</button>
    </div>
  </div>
</div>
</div>
</div>

Static modal

When clicking outside of the modal, use the data-modal-backdrop="static" data attribute to keep the modal from closing. This can be applied in scenarios where you need to make the user select a choice, as when they are filling out a survey or receiving a cookie notice. Use this tailwind css modal example for static modal.

  <div class="w-full relative">
<button type="button" class="modal-button py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-pd-overlay="#static-backdrop-modal" data-modal-target="static-backdrop-modal" data-modal-toggle="static-backdrop-modal"> Open modal </button>
<div id="static-backdrop-modal" class="pd-overlay hidden w-full h-full fixed top-0 left-0 z-[100] overflow-x-hidden overflow-y-auto">
<div class="opacity-0  ease-out modal-open:opacity-100 transition-all modal-open:duration-500 sm:max-w-lg sm:w-full m-5 sm:mx-auto">
 <div class="flex flex-col bg-white rounded-2xl py-4 px-5">
   <div class="flex justify-between items-center pb-4 border-b border-gray-200">
     <h4 class="text-sm text-gray-900 font-medium">Modal simple</h4>
     <button class="block cursor-pointer close-modal-button" data-pd-overlay="#static-backdrop-modal" data-modal-target="static-backdrop-modal">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.75732 7.75739L16.2426 16.2427M16.2426 7.75739L7.75732 16.2427" stroke="black" stroke-width="1.6" stroke-linecap="round"></path>
       </svg>
     </button>
   </div>
   <div class="overflow-y-auto py-4 min-h-[100px]">
     <p class=" text-gray-600 text-sm"> This is the regular modal with supporting text below as additional content </p>
   </div>
   <div class="flex items-center justify-end pt-4 border-t border-gray-200 space-x-4">
     <button type="button" class="py-2.5 px-5 text-xs bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100 close-modal-button" data-pd-overlay="#static-backdrop-modal" data-modal-target="static-backdrop-modal">Cancel</button>
     <button type="button" class="py-2.5 px-5 text-xs  bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 close-modal-button" data-pd-overlay="#static-backdrop-modal" data-modal-target="static-backdrop-modal">Okay, got it</button>
   </div>
 </div>
</div>
</div>
</div>

Scrolling behavior

Use this tailwind ui modal component to show more detailed information about your product where modal body have scrolling inside.

 <div class="w-full relative">
<!--scroll inside body-->
<button type="button" class="modal-button py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-pd-overlay="#scroll-inside-body-modal" data-modal-target="scroll-inside-body-modal" data-modal-toggle="scroll-inside-body-modal"> Scroll inside body </button>
<div id="scroll-inside-body-modal" class="pd-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
<div class="opacity-0  ease-out modal-open:opacity-100 transition-all modal-open:duration-500 sm:max-w-lg sm:w-full m-3 sm:mx-auto ">
 <div class="flex flex-col bg-white rounded-2xl py-4 px-5 h-[500px] overflow-y-auto">
   <div class="flex justify-between items-center pb-4 border-b border-gray-200">
     <h4 class="text-sm text-gray-900 font-medium">Modal simple</h4>
     <button class="block cursor-pointer close-modal-button" data-pd-overlay="#scroll-inside-body-modal" data-modal-target="scroll-inside-body-modal">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.75732 7.75739L16.2426 16.2427M16.2426 7.75739L7.75732 16.2427" stroke="black" stroke-width="1.6" stroke-linecap="round"></path>
       </svg>
     </button>
   </div>
   <div class="overflow-y-auto py-4 min-h-[100px]">
     <div class="block mb-4">
       <h4 class="text-sm text-gray-900 font-medium mb-2">Lorem ipsum</h4>
       <p class=" text-gray-600 text-sm"> Better feed post move 4-blocker your. Data downloaded way info one own practices crack. Reference us reach pulling go already want moving backwards. Without point pivot most social down. Elephant problem criticality forward chime goto. Pain go launch door boy baseline. Shower awareness discussions without cross-pollination developing. </p>
     </div>
     <div class="block mb-4">
       <h4 class="text-sm text-gray-900 font-medium mb-2">Lorem ipsum</h4>
       <p class=" text-gray-600 text-sm"> Better feed post move 4-blocker your. Data downloaded way info one own practices crack. Reference us reach pulling go already want moving backwards. Without point pivot most social down. Elephant problem criticality forward chime goto. Pain go launch door boy baseline. Shower awareness discussions without cross-pollination developing. </p>
     </div>
     <div class="block mb-4">
       <h4 class="text-sm text-gray-900 font-medium mb-2">Lorem ipsum</h4>
       <p class=" text-gray-600 text-sm"> Better feed post move 4-blocker your. Data downloaded way info one own practices crack. Reference us reach pulling go already want moving backwards. </p>
     </div>
     <div class="block mb-4">
       <h4 class="text-sm text-gray-900 font-medium mb-2">Lorem ipsum</h4>
       <p class=" text-gray-600 text-sm"> Better feed post move 4-blocker your. Data downloaded way info one own practices crack. Reference us reach pulling go already want moving backwards. </p>
     </div>
     <div class="block mb-4">
       <h4 class="text-sm text-gray-900 font-medium mb-2">Lorem ipsum</h4>
       <p class=" text-gray-600 text-sm"> Better feed post move 4-blocker your. Data downloaded way info one own practices crack. Reference us reach pulling go already want moving backwards. </p>
     </div>
   </div>
   <div class="flex items-center justify-end pt-4 border-t border-gray-200 space-x-4">
     <button type="button" class="py-2.5 px-5 text-xs bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100 close-modal-button" data-pd-overlay="#scroll-inside-body-modal" data-modal-target="scroll-inside-body-modal">Cancel</button>
     <button type="button" class="py-2.5 px-5 text-xs  bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 close-modal-button" data-pd-overlay="#scroll-inside-body-modal" data-modal-target="scroll-inside-body-modal">Okay, got it</button>
   </div>
 </div>
</div>
</div>
</div>

Form element

Take advantage of this modal example with form input element to collect data from your users. It has the benefit of keeping the user on the page that is presently active rather than requiring a link to another one. A registration or login form would be excellent tailwind modal form.

  <div class="w-full relative">
<button type="button" class="modal-button  py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700" data-pd-overlay="#subscribe-form-modal" data-modal-target="subscribe-form-modal" data-modal-toggle="subscribe-form-modal"> Subscribe modal </button>
<div id="subscribe-form-modal" class="pd-overlay  hidden w-full h-full fixed top-0 left-0 z-[100] overflow-x-hidden overflow-y-auto">
<div class=" opacity-0  ease-out  sm:max-w-lg sm:w-full m-5 sm:mx-auto modal-open:opacity-100 transition-all modal-open:duration-500">
  <div class="flex flex-col bg-white rounded-2xl py-4 px-5">
    <div class="flex justify-between items-center pb-4 border-b border-gray-200">
      <h4 class="text-sm text-gray-900 font-medium">Subscribe to newsletter</h4>
      <button class="block cursor-pointer close-modal-button" data-pd-overlay="#subscribe-form-modal" data-modal-target="subscribe-form-modal">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.75732 7.75739L16.2426 16.2427M16.2426 7.75739L7.75732 16.2427" stroke="black" stroke-width="1.6" stroke-linecap="round" />
        </svg>
      </button>
    </div>
    <div class="overflow-y-auto py-4 min-h-[130px]">
      <div class="relative">
        <label class="flex  items-center mb-2 text-gray-600 text-sm font-medium">Email </label>
        <input type="text" id="default-search" class="block w-full h-11 px-5 py-2.5 text-base font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none " placeholder="Enter your email" required="">
      </div>
    </div>
    <div class="flex items-center justify-end pt-4 border-t border-gray-200 space-x-4">
      <button type="button" class="py-2.5 px-5 text-xs bg-indigo-50 text-indigo-500 rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-100 close-modal-button" data-pd-overlay="#subscribe-form-modal" data-modal-target="subscribe-form-modal">Cancel</button>
      <button type="button" class="py-2.5 px-5 text-xs  bg-indigo-500 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 close-modal-button" data-pd-overlay="#subscribe-form-modal" data-modal-target="subscribe-form-modal">Okay, got it</button>
    </div>
  </div>
</div>
</div>
</div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More