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.
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 add
modal-buttonclass 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>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>