<div 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 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 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>Framework
All Frameworks
UI Library
All Libraries
Components
- Alert 266
- Application 226
- Banners 98
- Benefits 16
- Blog 285
- Breadcrumbs 24
- Call to action 403
- Cards 29
- Careers 40
- Confirmation 6
- Contact 189
- Content 217
- Cookies 193
- Dashboards 13
- Download 5
- E-commerce (orders) 63
- E-commerce (products) 120
- FAQ 185
- Features 514
- Footers 264
- Forms 9
- Gallery 5
- Graphs 65
- HTTP codes 211
- Hero section 350
- How it works 224
- Instagram photos 5
- Integrations 5
- Logo clouds 344
- Modals 42
- Navbar 305
- Navigation (horizontal) 432
- Navigation (vertical) 23
- Newsletter 218
- Notifications 7
- Paginations 12
- Portfolio 184
- Pricing 221
- Product info 5
- Projects 15
- Reviews 42
- Rich text 6
- Sign in / Sign up 335
- Snackbars 10
- Stats 281
- Tables 158
- Team 206
- Testimonials 244
- Users 59
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
Modals Components by Shuffle
Choose from 42 variations of Modals UI components. Presented here are variants available in various UI libraries.
Get access to all UI components, code, and our visual editor. Try the demo for free!
