Tailwind CSS Modal - Material Tailwind

<!DOCTYPE html><html lang="en" class="scroll-smooth"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Tailwind CSS Modal - Material Tailwind</title><meta name="description" content="Customise your web projects with our easy-to-use modal component for Tailwind CSS using Material Design guidelines."/><link rel="canonical" href="https://www.material-tailwind.com/docs/html/modal"/><meta name="next-head-count" content="5"/><meta name="ahrefs-site-verification" content="7b6973de8e282762b663bca399042c685eb9ef3217a725e88c8cf68f599b967b"/><link rel="shortcut icon" href="https://docs.material-tailwind.com/favicon.png" type="image/png"/><link rel="apple-touch-icon" sizes="180x180" href="https://docs.material-tailwind.com/favicon.png"/><link rel="icon" type="image/png" sizes="32x32" href="https://docs.material-tailwind.com/favicon.png"/><link rel="icon" type="image/png" sizes="16x16" href="https://docs.material-tailwind.com/favicon.png"/><link rel="manifest" href="https://docs.material-tailwind.com/img/site.webmanifest"/><link rel="mask-icon" href="https://docs.material-tailwind.com/img/safari-pinned-tab.svg" color="#020617"/><meta name="msapplication-TileColor" content="#020617"/><meta name="theme-color" content="#ffffff"/><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1"/></noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous"/><script defer="" data-domain="material-tailwind.com" src="https://plausible.io/js/script.js"></script><script defer="" src="https://cdn.jsdelivr.net/npm/apexcharts"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"/><script defer="" src="https://cdn.jsdelivr.net/npm/flatpickr"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/><script defer="" src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script><script async="" defer="" src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script><script async="" defer="" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" href="https://docs.material-tailwind.com/_next/static/css/ca6b01f261ab16d0.css" as="style"/><link rel="stylesheet" href="https://docs.material-tailwind.com/_next/static/css/ca6b01f261ab16d0.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="https://docs.material-tailwind.com/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="https://docs.material-tailwind.com/_next/static/chunks/webpack-4530abfa10c7789f.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/framework-5ac2b14b431a77fa.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/main-3092d4aad05c774c.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/pages/_app-b264bd2bc24d7974.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/2d7f6f8c-97884eec69e990bf.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/fc83e031-ab0de3e344fce1dc.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/ff39441c-accb95dc5730898c.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/9f96d65d-c1f4b49dbc767bef.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/d848df63-b45c47b3fb9784b2.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/38-419c464ef6ade4f9.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/pages/docs/%5B...slug%5D-855efe671254ef22.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/7xyavH52hdVKj4bs-JAX1/_buildManifest.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/7xyavH52hdVKj4bs-JAX1/_ssgManifest.js" defer=""></script><style data-href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap">@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sFVQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgWxM.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5vAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Me5g.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9vAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlvAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtvAA.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojIWWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoDISWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjo0oSWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjovoSWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoUoOWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4OWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoDIOWaw.woff) format('woff')}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoJYOWaw.woff) format('woff')}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJV37MOzlojwUKaJO.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVT7MOzlojwUKaJO.woff) format('woff');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVz7MOzlojwUKaJO.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVP7MOzlojwUKaJO.woff) format('woff');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJV77MOzlojwUKaJO.woff) format('woff');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_A9sJVD7MOzlojwUKQ.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxMIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxEIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxLIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxHIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxGIzIXKMnyrYk.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:100;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufJ5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufB5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufO5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufC5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufD5qWr4xCCQ_k.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/robotoslab/v34/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style><style data-href="https://fonts.googleapis.com/icon?family=Material+Icons">@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff')}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga'}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2')}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}</style></head><body class="root"> <script async="" defer="" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script><noscript><iframe title="google-tag-manage" src="https://www.googletagmanager.com/ns.html?id=GTM-KB2WKJS" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div id="__next"><div class="relative mb-8 h-full w-full bg-white"><div class="sticky top-0 z-[999] flex w-full items-center"><nav class="block px-8 backdrop-saturate-200 backdrop-blur-2xl bg-opacity-80 border border-white/80 text-white w-full max-w-full rounded-none border-b-[1.5px] !border-blue-gray-50 bg-white py-1.5 !pl-2 !pr-3 lg:!px-4 lg:!py-0.5"><div class="container mx-auto"><div class="flex w-full items-center !justify-between"><a class="py-2.375 mr-4 flex items-center gap-2 text-inherit lg:ml-0" href="/"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" fill="none"><rect width="32" height="32" rx="5" fill="black"></rect><rect x="7.43408" y="10.8491" width="16.74" height="10.3629" fill="url(#pattern0)"></rect><defs><pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#image0_5_15367" transform="matrix(0.000437181 0 0 0.000706215 -0.000571691 0)"></use></pattern><image id="image0_5_15367" width="2290" height="1416" xlink:href="data:image/png;base64,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Yz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSIyMjkwIiBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTQxNiIgZXhpZjpVc2VyQ29tbWVudD0iU2NyZWVuc2hvdCIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMDYtMjZUMTU6Mzg6MTcrMDM6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA2LTI4VDExOjE2OjA5KzAzOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA2LTI4VDExOjE2OjA5KzAzOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRpc3BsYXkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTBlM2VmZDMtYmFkNi00N2ZjLWFjOTItZTRmNmQ0ZDY5NDgwIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZGZmOWIxOTktMmViZC1mMDQyLWJmZmUtOWViYTM3Y2IwZmRhIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6OTQ1NmZkMWQtN2M4Yy00YjAwLThhZTYtM2YxYjA2Y2YzMTAxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OTQ1NmZkMWQtN2M4Yy00YjAwLThhZTYtM2YxYjA2Y2YzMTAxIiBzdEV2dDp3aGVuPSIyMDIzLTA2LTI4VDExOjE2OjA5KzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3No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"></image></defs></svg>Material Tailwind<div class="relative grid items-center font-sans font-bold uppercase whitespace-nowrap select-none py-1.5 px-3 text-xs rounded-lg ml-2 border-[1.5px] border-blue-gray-50 pb-1 pt-1.5 text-primary" style="opacity:0">v2.3.2</div><hr class="mx-2 h-8 border-r border-primary/10"/>Documentation</a><button class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none max-w-[40px] max-h-[40px] rounded-lg text-xs ml-auto h-6 w-6 text-primary hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-primary text-primary" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button><div class="lg:base-auto hidden flex-grow basis-full items-center lg:flex lg-max:max-h-0"><div class="flex w-full flex-col justify-end lg:!ml-auto lg:flex-row"><nav class="flex flex-col gap-1 p-2 font-sans text-base font-normal text-blue-gray-700 min-w-max px-0 lg:!flex-row"><a class="flex items-center gap-1 cursor-pointer rounded-lg py-2.5 px-4 text-sm text-blue-gray-800 hover:text-primary hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-primary focus:text-primary active:text-primary transition-all leading-none" aria-expanded="false" aria-haspopup="menu" id=":R5qlkmH2:" href="/docs/react/installation">Docs</a><a href="/pro"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Pro</div></a><a href="/blocks"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Blocks</div></a><a href="/roots-of-ui-ux-design"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Book</div></a><div class="flex cursor-pointer items-center gap-1 rounded-lg px-4 py-2.5 text-sm leading-none text-blue-gray-800 transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-primary focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-primary active:bg-blue-gray-50 active:bg-opacity-80 active:text-primary" aria-expanded="false" aria-haspopup="menu" id=":RlqlkmH2:">Resources <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3.5 w-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></nav><div class="ml-2 flex items-center gap-2"><div class="group relative mt-1"><div class="relative w-full min-w-[200px] h-10 min-w-[100px]"><input type="email" placeholder="Search" class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2 border-t-transparent focus:border-t-transparent placeholder:opacity-0 focus:placeholder:opacity-100 text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200 focus:border-gray-900 !h-9 w-full border-[1.5px] !border-blue-gray-100 bg-white text-blue-gray-800 ring-4 ring-transparent placeholder:text-blue-gray-600 focus:!border-primary focus:!border-t-primary group-hover:!border-primary"/><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200 peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900 hidden"> </label></div><div class="absolute right-3.5 top-1.5 "><kbd class="rounded border border-blue-gray-100 bg-white px-1 pb-0 pt-px text-xs font-medium text-gray-900 shadow shadow-black/5">⌘K</kbd></div><div class="absolute inset-0 w-full opacity-0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>Search</button>ab</div></div><a target="_blank" rel="noreferrer" class="flex items-center gap-2 p-1.5 text-primary" href="https://github.com/creativetimofficial/material-tailwind?ref=material-tailwind"><div class="relative grid font-sans font-bold uppercase whitespace-nowrap select-none px-3 rounded-lg items-center gap-2 border !border-blue-gray-100 bg-white py-1 !pr-2 text-xs text-blue-gray-900" style="opacity:0"><div class="absolute top-2/4 -translate-y-2/4 w-5 h-5 left-1.5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="text-blue-gray-900" class="!ml-0 mt-[2.5px] h-3.5 w-3.5"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"></path></svg></div>0</div></a><a target="_blank" rel="noreferrer" class="p-1.5 leading-none text-primary opacity-80" href="https://discord.com/invite/FhCJCaHdQa"></a><a href="/blocks#pricing"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs px-4 rounded-lg text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none flex items-center justify-between bg-gray-900 py-2.5" type="button">Pricing & FAQ</button></a></div></div></div></div><div class="block w-full basis-full overflow-hidden" style="height:0px"><div class="overflow-hidden pb-1 lg:overflow-visible"><div class="flex w-full flex-col justify-end lg:!ml-auto lg:flex-row"><nav class="flex flex-col gap-1 p-2 font-sans text-base font-normal text-blue-gray-700 min-w-max px-0 lg:!flex-row"><a class="flex items-center gap-1 cursor-pointer rounded-lg py-2.5 px-4 text-sm text-blue-gray-800 hover:text-primary hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 hover:text-primary focus:text-primary active:text-primary transition-all leading-none" aria-expanded="false" aria-haspopup="menu" id=":RbclkmH2:" href="/docs/react/installation">Docs</a><a href="/pro"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Pro</div></a><a href="/blocks"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Blocks</div></a><a href="/roots-of-ui-ux-design"><div role="button" tabindex="0" class="flex items-center w-full p-3 rounded-lg text-start transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80 focus:text-blue-gray-900 active:text-blue-gray-900 outline-none px-4 py-2.5 text-sm text-blue-gray-800 hover:text-primary">Book</div></a><div class="flex cursor-pointer items-center gap-1 rounded-lg px-4 py-2.5 text-sm leading-none text-blue-gray-800 transition-all hover:bg-blue-gray-50 hover:bg-opacity-80 hover:text-primary focus:bg-blue-gray-50 focus:bg-opacity-80 focus:text-primary active:bg-blue-gray-50 active:bg-opacity-80 active:text-primary" aria-expanded="false" aria-haspopup="menu" id=":R1bclkmH2:">Resources <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3.5 w-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></div></nav><div class="ml-2 flex items-center gap-2"><div class="group relative mt-1"><div class="relative w-full min-w-[200px] h-10 min-w-[100px]"><input type="email" placeholder="Search" class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2 border-t-transparent focus:border-t-transparent placeholder:opacity-0 focus:placeholder:opacity-100 text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200 focus:border-gray-900 !h-9 w-full border-[1.5px] !border-blue-gray-100 bg-white text-blue-gray-800 ring-4 ring-transparent placeholder:text-blue-gray-600 focus:!border-primary focus:!border-t-primary group-hover:!border-primary"/><label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200 peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900 hidden"> </label></div><div class="absolute right-3.5 top-1.5 "><kbd class="rounded border border-blue-gray-100 bg-white px-1 pb-0 pt-px text-xs font-medium text-gray-900 shadow shadow-black/5">⌘K</kbd></div><div class="absolute inset-0 w-full opacity-0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>Search</button>ab</div></div><a target="_blank" rel="noreferrer" class="flex items-center gap-2 p-1.5 text-primary" href="https://github.com/creativetimofficial/material-tailwind?ref=material-tailwind"><div class="relative grid font-sans font-bold uppercase whitespace-nowrap select-none px-3 rounded-lg items-center gap-2 border !border-blue-gray-100 bg-white py-1 !pr-2 text-xs text-blue-gray-900" style="opacity:0"><div class="absolute top-2/4 -translate-y-2/4 w-5 h-5 left-1.5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="text-blue-gray-900" class="!ml-0 mt-[2.5px] h-3.5 w-3.5"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"></path></svg></div>0</div></a><a target="_blank" rel="noreferrer" class="p-1.5 leading-none text-primary opacity-80" href="https://discord.com/invite/FhCJCaHdQa"></a><a href="/blocks#pricing"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs px-4 rounded-lg text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none flex items-center justify-between bg-gray-900 py-2.5" type="button">Pricing & FAQ</button></a></div></div></div></div></div><div class="mt-2 flex items-center border-t border-blue-gray-50 pb-2 pt-4 lg:hidden"><button type="button" class="text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"></path></svg></button><ol class="ml-4 flex min-w-0 whitespace-nowrap text-sm leading-6 text-blue-gray-700"><li class="flex items-center capitalize">html<svg width="3" height="6" class="mx-3 overflow-visible text-blue-gray-300"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></li><li class="flex items-center capitalize">modal</li></ol></div></nav></div><div class="px-6"><div class="container mx-auto flex"><aside class="fixed top-0 z-[999] h-screen w-80 overflow-y-scroll pb-4 pr-4 transition-all duration-300 lg:sticky lg:left-0 lg:top-16 lg:z-10 lg:w-56 -left-96"><div class="fixed left-0 top-0 h-screen w-screen bg-gray-900/20 backdrop-blur-sm transition-opacity duration-300 lg:hidden pointer-events-none opacity-0"></div><div class="fixed top-0 z-[9999] h-screen w-80 overflow-y-scroll !bg-white pb-6 pl-6 lg:relative lg:w-56 lg:bg-transparent lg:pl-0 lg:pt-0"><div class="mb-24 mt-6"><div>Getting Started<ul class="py-2"><li class=""><a href="/docs/html/installation">Installation</a></li><li class=""><a href="/docs/html/license">License</a></li><li class=""><a href="/docs/html/what-is-tailwind-css">What is Tailwind CSS</a></li><li class="!mb-4"><a href="/docs/html/release-notes">Release Notes</a></li></ul></div><div>Integration Guide<ul class="py-2"><li class=""><a href="/docs/html/guide/react-vite">React</a></li><li class=""><a href="/docs/html/guide/next">Next.js</a></li><li class=""><a href="/docs/html/guide/vue-vite">Vue</a></li><li class=""><a href="/docs/html/guide/nuxt">Nuxt.js</a></li><li class=""><a href="/docs/html/guide/svelte">Svelte</a></li><li class=""><a href="/docs/html/guide/laravel">Laravel</a></li><li class=""><a href="/docs/html/guide/angular">Angular</a></li><li class=""><a href="/docs/html/guide/remix">Remix</a></li><li class=""><a href="/docs/html/guide/meteor">Meteor.js</a></li><li class=""><a href="/docs/html/guide/gatsby">Gatsby</a></li><li class=""><a href="/docs/html/guide/solid">Solid.js</a></li><li class=""><a href="/docs/html/guide/qwik">Qwik</a></li><li class=""><a href="/docs/html/guide/symfony">Symfony</a></li><li class=""><a href="/docs/html/guide/phoenix">Phoenix</a></li><li class=""><a href="/docs/html/guide/django">Django</a></li><li class="!mb-4"><a href="/docs/html/guide/flask">Flask</a></li></ul></div><div>Customization<ul class="py-2"><li class=""><a href="/docs/html/theming">Theming</a></li><li class=""><a href="/docs/html/colors">Colors</a></li><li class=""><a href="/docs/html/fonts">Fonts</a></li><li class=""><a href="/docs/html/shadows">Shadows</a></li><li class="!mb-4"><a href="/docs/html/screens">Screens</a></li></ul></div><div>Components<ul class="py-2"><li class=""><a href="/docs/html/accordion">Accordion</a></li><li class=""><a href="/docs/html/alert">Alert</a></li><li class=""><a href="/docs/html/avatar">Avatar</a></li><li class=""><a href="/docs/html/badge">Badge</a></li><li class=""><a href="/docs/html/breadcrumbs">Breadcrumbs</a></li><li class=""><a href="/docs/html/button">Button</a></li><li class=""><a href="/docs/html/button-group">Button Group</a></li><li class=""><a href="/docs/html/card">Card</a></li><li class=""><a href="/docs/html/checkbox">Checkbox</a></li><li class=""><a href="/docs/html/chip">Chip</a></li><li class=""><a href="/docs/html/collapse">Collapse</a></li><li class=""><a href="/docs/html/dialog">Dialog</a></li><li class=""><a href="/docs/html/footer">Footer</a></li><li class=""><a href="/docs/html/form">Form</a></li><li class=""><a href="/docs/html/gallery">Gallery</a></li><li class=""><a href="/docs/html/icon-button">Icon Button</a></li><li class=""><a href="/docs/html/image">Image</a></li><li class=""><a href="/docs/html/input">Input</a></li><li class=""><a href="/docs/html/input-number">Input Number</a></li><li class=""><a href="/docs/html/input-phone">Input Phone</a></li><li class=""><a href="/docs/html/input-search">Input Search</a></li><li class=""><a href="/docs/html/list">List</a></li><li class=""><a href="/docs/html/menu">Menu</a></li><li class=""><a href="/docs/html/mega-menu">Mega Menu</a></li><li class=""><a href="/docs/html/modal">Modal</a></li><li class=""><a href="/docs/html/navbar">Navbar</a></li><li class=""><a href="/docs/html/pagination">Pagination</a></li><li class=""><a href="/docs/html/popover">Popover</a></li><li class=""><a href="/docs/html/progress-bar">Progress Bar</a></li><li class=""><a href="/docs/html/radio-button">Radio Button</a></li><li class=""><a href="/docs/html/rating">Rating</a></li><li class=""><a href="/docs/html/select">Select</a></li><li class=""><a href="/docs/html/sidebar">Sidebar</a></li><li class=""><a href="/docs/html/skeleton">Skeleton</a></li><li class=""><a href="/docs/html/speed-dial">Speed Dial</a></li><li class=""><a href="/docs/html/spinner">Spinner</a></li><li class=""><a href="/docs/html/stepper">Stepper</a></li><li class=""><a href="/docs/html/switch">Switch</a></li><li class=""><a href="/docs/html/tabs">Tabs</a></li><li class=""><a href="/docs/html/table">Table</a></li><li class=""><a href="/docs/html/textarea">Textarea</a></li><li class=""><a href="/docs/html/timeline">Timeline</a></li><li class=""><a href="/docs/html/tooltip">Tooltip</a></li><li class=""><a href="/docs/html/typography">Typography</a></li><li class="!mb-4"><a href="/docs/html/video">Video</a></li></ul></div><div>Plugins<ul class="py-2"><li class=""><a href="/docs/html/plugins/algolia-search">Algolia Search</a></li><li class=""><a href="/docs/html/plugins/charts">Charts</a></li><li class=""><a href="/docs/html/plugins/clipboard">Clipboard</a></li><li class=""><a href="/docs/html/plugins/date-picker">Date Picker</a></li><li class="!mb-4"><a href="/docs/html/plugins/text-editor">WSSIWYG Editor</a></li></ul></div><div class="relative flex flex-col bg-clip-border rounded-xl bg-gray-900 text-white shadow-gray-900/20 shadow-md"><div class="p-6 px-4 py-2.5"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-inherit mb-1">Material Tailwind v3</h6>We've just released the new version of Material Tailwind with a lot of new features and improvements. It's currently on beta and we need your feedback to make it better.<a href="/docs/v3/react/installation"><button class="align-middle select-none font-sans font-bold text-center transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg bg-white text-blue-gray-900 shadow-md shadow-blue-gray-500/10 hover:shadow-lg hover:shadow-blue-gray-500/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none block w-full mb-1.5 mt-4 normal-case" type="button">Go to v3 Docs</button></a></div></div></div></div></aside><div class="mt-6 w-full lg:w-[60%] lg:px-6"><h1 class="block antialiased tracking-normal font-sans text-3xl font-semibold leading-snug !mb-4 text-primary lg:!text-3xl">Tailwind CSS Modal</h1> <a href="/docs/html/modal#required-script" class="mb-6 mt-2 block"><div class="inline-flex items-center bg-slate-100 hover:bg-slate-200 transition-all p-1 pr-4 text-sm text-slate-700 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"></path></svg>Requires extra Javascript Scripts</div></a> Use our Tailwind CSS modal component to inform users about tasks or important information that require decisions or involve multiple steps. A modal is a window that displays critical information, disabling all app functionality when it appears, and remains on screen until confirmed or dismissed. See below our modal examples styled with Tailwind CSS that you can use for your web or mobile apps. To initialize a new modal: Add <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">data-dialog-target="<code>{modal}</code>"</code> to the trigger element. Add <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">data-dialog-backdrop="<code>{modalName}</code>"</code> to the backdrop element. Add <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">data-dialog="<code>{modalName}</code>"</code> to the modal element itself. Make sure that the values for these data attributes are the same. To close the modal when an element is clicked, add <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">data-dialog-close="true"</code> to that element. <h3 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug !mb-2 text-primary">Modal Examples:</h3> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Default Modal</h2> This coded example demonstrates a modal component; it includes a trigger button, a backdrop, and customizable styling for the modal's content and actions. Upon clicking the "Open Modal" button, the modal is rendered over the backdrop, ensuring a focused interaction for the user. The content and behavior can be easily adjusted to suit your website's requirements. <div id="modal" class="scroll-mt-64 overflow-hidden rounded-xl border border-blue-gray-50 bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><button data-dialog-target="modal" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Open Modal</button><div data-dialog-backdrop="modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div data-dialog="modal" class="relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm"><div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">Its a simple Modal</div><div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</div><div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"><button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Cancel</button><button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Confirm</button></div></div></div></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="html" data-theme="default"><code data-language="html" data-theme="default"><button data-dialog-target="modal" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Open Modal </button> <div data-dialog-backdrop="modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div data-dialog="modal" class="relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm" > <div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800"> Its a simple Modal </div> <div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light"> The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan luv. </div> <div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"> <button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Cancel </button> <button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Confirm </button> </div> </div> </div></code></pre></div></div></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Modal Sizes</h2> You can set the size of the modal on your own using the Tailwind CSS classes. We already made some default sizes for you, check the examples below for implementation details. <div id="modal-sizes" class="scroll-mt-64 overflow-hidden rounded-xl border border-blue-gray-50 bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><div class="mb-3 flex gap-3"><button data-dialog-target="modal-xs" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Open Modal XS</button><div data-dialog-backdrop="modal-xs" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div data-dialog="modal-xs" class="relative m-4 p-4 w-1/4 rounded-lg bg-white shadow-sm"><div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">Its a simple Modal</div><div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</div><div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"><button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Cancel</button><button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Confirm</button></div></div></div><button data-dialog-target="modal-sm" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Open Modal SM</button><div data-dialog-backdrop="modal-sm" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div data-dialog="modal-sm" class="relative m-4 p-4 w-1/3 rounded-lg bg-white shadow-sm"><div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">Its a simple Modal</div><div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</div><div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"><button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Cancel</button><button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Confirm</button></div></div></div><button data-dialog-target="modal-md" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Open Modal MD</button><div data-dialog-backdrop="modal-md" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div data-dialog="modal-md" class="relative m-4 p-4 w-2/5 rounded-lg bg-white shadow-sm"><div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">Its a simple Modal</div><div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</div><div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"><button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Cancel</button><button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Confirm</button></div></div></div></div><div class="mb-3 flex gap-3"><button data-dialog-target="modal-lg" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Open Modal LG</button><div data-dialog-backdrop="modal-lg" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div data-dialog="modal-lg" class="relative m-4 p-4 w-3/5 rounded-lg bg-white shadow-sm"><div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">Its a simple Modal</div><div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</div><div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"><button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Cancel</button><button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Confirm</button></div></div></div><button data-dialog-target="modal-xl" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Open Modal XL</button><div data-dialog-backdrop="modal-xl" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div data-dialog="modal-xl" class="relative m-4 p-4 w-3/4 rounded-lg bg-white shadow-sm"><div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">Its a simple Modal</div><div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</div><div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"><button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Cancel</button><button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Confirm</button></div></div></div><button data-dialog-target="modal-xxl" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Open Modal XXL</button><div data-dialog-backdrop="modal-xxl" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div data-dialog="modal-xxl" class="relative w-screen h-screen bg-white shadow-sm"><div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">Its a simple Modal</div><div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</div><div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"><button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Cancel</button><button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Confirm</button></div></div></div></div></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="html" data-theme="default"><code data-language="html" data-theme="default"><div class="mb-3 flex gap-3"> <button data-dialog-target="modal-xs" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Open Modal XS </button> <div data-dialog-backdrop="modal-xs" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div data-dialog="modal-xs" class="relative m-4 p-4 w-1/4 rounded-lg bg-white shadow-sm" > <div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800"> Its a simple modal. </div> <div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light"> The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan luv. </div> <div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"> <button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Cancel </button> <button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Confirm </button> </div> </div> </div> <button data-dialog-target="modal-sm" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Open Modal SM </button> <div data-dialog-backdrop="modal-sm" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div data-dialog="modal-sm" class="relative m-4 p-4 w-1/3 rounded-lg bg-white shadow-sm" > <div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800"> Its a simple modal. </div> <div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light"> The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan luv. </div> <div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"> <button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Cancel </button> <button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Confirm </button> </div> </div> </div> <button data-dialog-target="modal-md" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Open Modal MD </button> <div data-dialog-backdrop="modal-md" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div data-dialog="modal-md" class="relative m-4 p-4 w-2/5 rounded-lg bg-white shadow-sm" > <div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800"> Its a simple modal. </div> <div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light"> The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan luv. </div> <div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"> <button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Cancel </button> <button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Confirm </button> </div> </div> </div> </div> <div class="mb-3 flex gap-3"> <button data-dialog-target="modal-lg" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Open Modal LG </button> <div data-dialog-backdrop="modal-lg" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div data-dialog="modal-lg" class="relative m-4 p-4 w-3/5 rounded-lg bg-white shadow-sm" > <div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800"> Its a simple modal. </div> <div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light"> The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan luv. </div> <div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"> <button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Cancel </button> <button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Confirm </button> </div> </div> </div> <button data-dialog-target="modal-xl" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Open Modal XL </button> <div data-dialog-backdrop="modal-xl" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div data-dialog="modal-xl" class="relative m-4 p-4 w-3/4 rounded-lg bg-white shadow-sm" > <div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800"> Its a simple modal. </div> <div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light"> The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan luv. </div> <div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"> <button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Cancel </button> <button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Confirm </button> </div> </div> </div> <button data-dialog-target="dialog-xxl" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Open Modal XXL </button> <div data-dialog-backdrop="modal-xxl" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div data-dialog="modal-xxl" class="relative w-screen h-screen bg-white shadow-sm" > <div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800"> Its a simple modal. </div> <div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light"> The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan luv. </div> <div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"> <button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Cancel </button> <button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Confirm </button> </div> </div> </div> </div></code></pre></div></div></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Web 3.0 Modal</h2> This example of a modal component is for connecting a Web 3.0 wallet to a web application. It features a button to open the modal, a backdrop, wallet options, and additional informational elements. <div id="web-3-modal" class="scroll-mt-64 overflow-hidden rounded-xl border border-blue-gray-50 bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><button data-dialog-target="web-3-modal" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Connect Web 3.0 Wallet</button><div data-dialog-backdrop="web-3-modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div class="relative m-4 w-1/4 rounded-lg bg-white shadow-sm" data-dialog="web-3-modal"><div class="flex items-start justify-between p-4"><div><h5 class="text-xl font-medium text-slate-800">Connect Web 3.0 Wallet</h5>Choose which card you want to connect</div><button data-ripple-dark="true" data-dialog-close="true" class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-blue-gray-500 transition-all hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="relative px-4"><div class="mb-6">Popular<button class="w-full mt-3 rounded-md flex items-center justify-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"><img src="https://docs.material-tailwind.com/icons/metamask.svg" alt="metamask" class="h-5 w-5 mr-2"/>Connect Wallet</button><button class="w-full mt-2 rounded-md flex items-center justify-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"><img src="https://docs.material-tailwind.com/icons/coinbase.svg" alt="metamast" class="h-5 w-5 mr-2 rounded-md"/>Connect with Coinbase</button></div><div>Other<button class="mt-3 w-full rounded-md flex items-center justify-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"><img src="https://docs.material-tailwind.com/icons/trust-wallet.svg" alt="metamast" class="h-5 w-5 rounded-md mr-2 border border-slate-300"/>Connect with Trust Wallet</button></div></div><div class="flex flex-wrap items-center justify-between gap-2 p-4 text-blue-gray-500 mt-2">New to Ethereum wallets?<button class="rounded-md border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Learn More</button></div></div></div></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="html" data-theme="default"><code data-language="html" data-theme="default"><button data-dialog-target="web-3-modal" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Connect Web 3.0 Wallet </button> <div data-dialog-backdrop="web-3-modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div class="relative m-4 w-1/4 rounded-lg bg-white shadow-sm" data-dialog="web-3-modal" > <div class="flex items-start justify-between p-4"> <div> <h5 class="text-xl font-medium text-slate-800"> Connect Web 3.0 Wallet </h5> <p class="text-slate-500 text-sm font-light"> Choose which card you want to connect </p> </div> <button data-ripple-dark="true" data-dialog-close="true" class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-blue-gray-500 transition-all hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button" > <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" class="h-5 w-5" > <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" ></path> </svg> </span> </button> </div> <div class="relative px-4"> <div class="mb-6"> <p class="pt-3 text-xs uppercase text-slate-500"> Popular </p> <button class="w-full mt-3 rounded-md flex items-center justify-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> <img src="https://docs.material-tailwind.com/icons/metamask.svg" alt="metamask" class="h-5 w-5 mr-2" /> Connect Wallet </button> <button class="w-full mt-2 rounded-md flex items-center justify-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> <img src="https://docs.material-tailwind.com/icons/coinbase.svg" alt="metamast" class="h-5 w-5 mr-2 rounded-md" /> Connect with Coinbase </button> </div> <div> <p class="pt-3 text-xs uppercase text-slate-500"> Other </p> <button class="mt-3 w-full rounded-md flex items-center justify-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> <img src="https://docs.material-tailwind.com/icons/trust-wallet.svg" alt="metamast" class="h-5 w-5 rounded-md mr-2 border border-slate-300" /> Connect with Trust Wallet </button> </div> </div> <div class="flex flex-wrap items-center justify-between gap-2 p-4 text-blue-gray-500 mt-2"> <p class="text-sm text-slate-500"> New to Ethereum wallets? </p> <button class="rounded-md border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Learn More </button> </div> </div> </div></code></pre></div></div></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Modal with Custom Animation</h2> You can modify the open/close state animations for the modal by adding the <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">data-dialog-mount="<code>{opacity-100}</code>"</code>, <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">data-dialog-unmount="<code>{opacity-0}</code>"</code> and <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">data-dialog-transition="<code>{transition-opacity}</code>"</code> data attributes to the modal component. You can pass Tailwind CSS classnames for those data attributes for animating the modal. Check more about animation data attributes for modal <a class="hover:text-blue-500 font-medium" href="#dialog-data-attributes">here</a>. <div id="custom-modal-animation" class="scroll-mt-64 overflow-hidden rounded-xl border border-blue-gray-50 bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><button data-dialog-target="animated-modal" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Open Animation Modal</button><div data-dialog-backdrop="animated-modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div data-dialog="animated-modal" data-dialog-mount="opacity-100 translate-y-0 scale-100" data-dialog-unmount="opacity-0 -translate-y-28 scale-90 pointer-events-none" data-dialog-transition="transition-all duration-300" class="relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm"><div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">Custom Animation Modal</div><div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</div><div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"><button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Cancel</button><button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Confirm</button></div></div></div></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="html" data-theme="default"><code data-language="html" data-theme="default"><button data-dialog-target="animated-modal" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Open Animation Modal </button> <div data-dialog-backdrop="animated-modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div data-dialog="animated-modal" data-dialog-mount="opacity-100 translate-y-0 scale-100" data-dialog-unmount="opacity-0 -translate-y-28 scale-90 pointer-events-none" data-dialog-transition="transition-all duration-300" class="relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm" > <div class="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800"> Custom Animation Modal </div> <div class="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light"> The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I&apos;m never giving up, I&apos;m just getting started. I&apos;m up to something. Fan luv. </div> <div class="flex shrink-0 flex-wrap items-center pt-4 justify-end"> <button data-dialog-close="true" class="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Cancel </button> <button data-dialog-close="true" class="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Confirm </button> </div> </div> </div></code></pre></div></div></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Modal with Form</h2> Use the example below to create a modal with a Sign In form, Register form, or any other form like CRUD examples. <div id="modal-with-form" class="scroll-mt-64 overflow-hidden rounded-xl border border-blue-gray-50 bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><button data-dialog-target="sign-in-modal" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">Open Modal Form</button><div data-dialog-backdrop="sign-in-modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div data-dialog="sign-in-modal" class="relative mx-auto w-full max-w-[24rem] rounded-lg overflow-hidden shadow-sm"><div class="relative flex flex-col bg-white"><div class="relative m-2.5 items-center flex justify-center text-white h-24 rounded-md bg-slate-800"><h3 class="text-2xl">Sign In</h3></div><div class="flex flex-col gap-4 p-6"><div class="w-full max-w-sm min-w-[200px]"><label class="block mb-2 text-sm text-slate-600">Email</label><input type="email" class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow" placeholder="Your Email"/></div><div class="w-full max-w-sm min-w-[200px]"><label class="block mb-2 text-sm text-slate-600">Password</label><input type="password" class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow" placeholder="Your Password"/></div><div class="inline-flex items-center mt-2"><label class="flex items-center cursor-pointer relative" for="check-2"><input type="checkbox" class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow hover:shadow-md border border-slate-300 checked:bg-slate-800 checked:border-slate-800" id="check-2"/><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" stroke="currentColor" stroke-width="1"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg></label><label class="cursor-pointer ml-2 text-slate-600 text-sm" for="check-2">Remember Me</label></div></div><div class="p-6 pt-0"><button class="w-full rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Sign In</button>Don't have an account?<a href="#signup" class="ml-1 text-sm font-semibold text-slate-700 underline">Sign up</a></div></div></div></div></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="html" data-theme="default"><code data-language="html" data-theme="default"><button data-dialog-target="sign-in-modal" class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button"> Open Modal Form </button> <div data-dialog-backdrop="sign-in-modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div data-dialog="sign-in-modal" class="relative mx-auto w-full max-w-[24rem] rounded-lg overflow-hidden shadow-sm" > <div class="relative flex flex-col bg-white"> <div class="relative m-2.5 items-center flex justify-center text-white h-24 rounded-md bg-slate-800"> <h3 class="text-2xl"> Sign In </h3> </div> <div class="flex flex-col gap-4 p-6"> <div class="w-full max-w-sm min-w-[200px]"> <label class="block mb-2 text-sm text-slate-600"> Email </label> <input type="email" class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow" placeholder="Your Email" /> </div> <div class="w-full max-w-sm min-w-[200px]"> <label class="block mb-2 text-sm text-slate-600"> Password </label> <input type="password" class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow" placeholder="Your Password" /> </div> <div class="inline-flex items-center mt-2"> <label class="flex items-center cursor-pointer relative" htmlFor="check-2"> <input type="checkbox" class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow hover:shadow-md border border-slate-300 checked:bg-slate-800 checked:border-slate-800" id="check-2" /> <span class="absolute text-white opacity-0 pointer-events-none peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" stroke="currentColor" stroke-width="1"> <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path> </svg> </span> </label> <label class="cursor-pointer ml-2 text-slate-600 text-sm" htmlFor="check-2"> Remember Me </label> </div> </div> <div class="p-6 pt-0"> <button class="w-full rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Sign In </button> <p class="flex justify-center mt-6 text-sm text-slate-600"> Don&apos;t have an account? <a href="#signup" class="ml-1 text-sm font-semibold text-slate-700 underline"> Sign up </a> </p> </div> </div> </div> </div></code></pre></div></div></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Modal with Image</h2> Use the example below to create a modal with an image inside (you can find your images on Unsplash) and other details. <div id="modal-with-image" class="scroll-mt-64 overflow-hidden rounded-xl border border-blue-gray-50 bg-white "><div class="flex items-center justify-between border-b border-blue-gray-50 p-1 "><div class="flex w-full items-center justify-end gap-2"><button type="button" class="relative align-middle select-none font-sans font-medium text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none w-8 max-w-[32px] h-8 max-h-[32px] rounded-lg text-xs text-blue-gray-500 hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 hover:text-blue-gray-900"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path></svg></button></div></div><div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible"><div class="relative flex h-64 w-96 cursor-pointer flex-col overflow-hidden rounded-lg bg-white bg-clip-border shadow-sm transition-opacity hover:opacity-90" data-dialog-target="image-modal"><img alt="nature" class="h-full w-full object-cover object-center" src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?w=1300&q=80"/></div><div data-dialog-backdrop="image-modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"><div class="relative m-4 w-2/4 rounded-lg bg-white shadow-sm" role="dialog" data-dialog="image-modal"><div class="flex items-center justify-between p-4"><div class="flex items-center gap-3"><img alt="tania andrew" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=1300&q=80" class="relative inline-block h-9 w-9 rounded-full object-cover object-center"/><div class="-mt-px flex flex-col">Tania Andrew@andrew</div></div><div class="flex items-center gap-2"><button class="rounded-md border border-transparent p-2.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"></path></svg></button><button class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Free Download</button></div></div><div class="relative border-b border-t border-b-blue-gray-100 border-t-blue-gray-100 p-0 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased"><img alt="nature" class="h-[30rem] w-full object-cover object-center" src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?w=1300&q=80"/></div><div class="flex shrink-0 flex-wrap items-center justify-between p-4 text-blue-gray-500"><div class="flex items-center gap-16"><div>Views44,082,044</div><div>Downloads553,031</div></div><button class="flex items-center rounded-md border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="h-4 w-4 mr-1.5"><path fill-rule="evenodd" d="M15.75 4.5a3 3 0 11.825 2.066l-8.421 4.679a3.002 3.002 0 010 1.51l8.421 4.679a3 3 0 11-.729 1.31l-8.421-4.678a3 3 0 110-4.132l8.421-4.679a3 3 0 01-.096-.755z" clip-rule="evenodd"></path></svg>Share</button></div></div></div></div><div class="code-preview block max-h-[40rem] overflow-scroll rounded-b-xl"><div data-rehype-pretty-code-fragment=""><pre data-language="html" data-theme="default"><code data-language="html" data-theme="default"><div class="relative flex h-64 w-96 cursor-pointer flex-col overflow-hidden rounded-lg bg-white bg-clip-border shadow-sm transition-opacity hover:opacity-90" data-dialog-target="image-modal" > <img alt="nature" class="h-full w-full object-cover object-center" src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2717&amp;q=80" /> </div> <div data-dialog-backdrop="image-modal" data-dialog-backdrop-close="true" class="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300" > <div class="relative m-4 w-2/4 rounded-lg bg-white shadow-sm" role="modal" data-dialog="image-modal" > <div class="flex items-center justify-between p-4"> <div class="flex items-center gap-3"> <img alt="tania andrew" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=1300&amp;q=80" class="relative inline-block h-9 w-9 rounded-full object-cover object-center" /> <div class="-mt-px flex flex-col"> <p class="text-sm text-slate-800 font-medium"> Tania Andrew </p> <p class="text-xs font-normal text-slate-500"> @andrew </p> </div> </div> <div class="flex items-center gap-2"> <button class="rounded-md border border-transparent p-2.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"> <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" /> </svg> </button> <button class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Free Download </button> </div> </div> <div class="relative border-b border-t border-b-blue-gray-100 border-t-blue-gray-100 p-0 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased"> <img alt="nature" class="h-[30rem] w-full object-cover object-center" src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2717&amp;q=80" /> </div> <div class="flex shrink-0 flex-wrap items-center justify-between p-4 text-blue-gray-500"> <div class="flex items-center gap-16"> <div> <p class="text-slate-500 text-sm"> Views </p> <p class="text-slate-800 font-medium"> 44,082,044 </p> </div> <div> <p class="text-slate-500 text-sm"> Downloads </p> <p class="text-slate-800 font-medium"> 553,031 </p> </div> </div> <button class="flex items-center rounded-md border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="h-4 w-4 mr-1.5" > <path fill-rule="evenodd" d="M15.75 4.5a3 3 0 11.825 2.066l-8.421 4.679a3.002 3.002 0 010 1.51l8.421 4.679a3 3 0 11-.729 1.31l-8.421-4.678a3 3 0 110-4.132l8.421-4.679a3 3 0 01-.096-.755z" clip-rule="evenodd" ></path> </svg> Share </button> </div> </div> </div></code></pre></div></div></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Modal Trigger Data Attributes</h2> The following data attributes are available for modal trigger element. <div class="!overflow-scroll"><table class="!w-full !min-w-[700px] lg:!min-w-full"><thead><tr><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Attribute</th><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Description</th></tr></thead><tbody><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>data-dialog-target</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Set the modal target element, it should be the same as the <code>data-dialog</code> and <code>data-dialog-backdrop</code> data attributes.</td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>data-dialog-close</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">It's an optional data attribute, you can set it for any element and it will turn the element to a close trigger for modal when click event happened on that element.</td></tr></tbody></table></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Modal Backdrop Data Attributes</h2> The following data attributes are available for modal backdrop element. <div class="!overflow-scroll"><table class="!w-full !min-w-[700px] lg:!min-w-full"><thead><tr><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Attribute</th><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Description</th></tr></thead><tbody><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>data-dialog-backdrop</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Set the modal backdrop element, it should be the same as the <code>data-dialog</code> and <code>data-dialog-target</code> data attributes.</td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>data-dialog-backdrop-close</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Sets whether to close modal when clicking on it's backdrop or not.</td></tr></tbody></table></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Modal Data Attributes</h2> The following data attributes are available for modal element. <div class="!overflow-scroll"><table class="!w-full !min-w-[700px] lg:!min-w-full"><thead><tr><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Attribute</th><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Description</th><th class="min-w-[120px] border-b border-blue-gray-100 py-3 text-left font-medium text-blue-gray-900">Default</th></tr></thead><tbody><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>data-dialog</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Set the name of the modal and reference it to the modal trigger and backdrop elements.</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"></td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>data-popover-mount</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Set the classnaes that should be used when the modal is visible.</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">opacity-1</code> <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">translate-y-0</code></td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>data-popover-unmount</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Set the classnaes that should be used when the modal is hidden.</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">opacity-0</code> <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">-translate-y-14</code> <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">pointer-events-none</code></td></tr><tr><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code>data-popover-transition</code></td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500">Set the classnaes that should be used for transition of the modal.</td><td class="min-w-[120px] border-b border-blue-gray-50 py-3 text-left text-sm text-blue-gray-500"><code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">transition-all</code> <code class="rounded-md px-1 font-['Fira_Code'] font-normal bg-gray-900/[0.1] text-gray-900 text-sm">duration-300</code></td></tr></tbody></table></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Required Scripts</h2> The modal component needs a required script file to work, you just need to add the below script file to the bottom of your html file. <div data-rehype-pretty-code-fragment=""><pre data-language="html" data-theme="default"><code data-language="html" data-theme="default"> <script src="node_modules/@material-tailwind/html@latest/scripts/dialog.js"></script>  <script src="https://unpkg.com/@material-tailwind/html@latest/scripts/dialog.js"></script></code></pre></div> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Explore More Tailwind CSS Examples</h2> Check out more modal component examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>: • <a href="https://www.material-tailwind.com/blocks/modals" target="_blank">Modals</a> • <a href="https://www.material-tailwind.com/blocks/popup-sections" target="_blank">Popup Blocks</a> <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug !mb-2 text-primary">Modal Best Practices for Developers</h2> • Prioritize user experience by making modals unobtrusive and easy to dismiss. • Include clear and easily accessible close buttons, and allow users to close the modal by clicking outside it. • Maintain a consistent design language and layout across modals to create a familiar user experience. • Use subtle animations and transitions to open and close modals smoothly. Make sure that animations do not distract users. • Implement validation and error handling for form elements within the modal. </div><aside class="sticky top-14 ml-auto hidden h-screen w-64 pb-4 pt-6 lg:block"><div class="h-screen w-64 overflow-y-scroll pb-40">On This Page<ul class="mb-8 list-none pt-2"><li><a href="#modal" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">modal</a></li><li><a href="#modal-sizes" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">modal sizes</a></li><li><a href="#web-3-modal" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">web 3 modal</a></li><li><a href="#modal-custom-animation" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">modal custom animation</a></li><li><a href="#modal-with-form" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">modal with form</a></li><li><a href="#modal-with-image" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">modal with image</a></li></ul>Contribute<ul class="mb-8 list-none pt-2"><li><a target="_blank" href="https://github.com/creativetimofficial/material-tailwind/blob/main/CONTRIBUTING.md?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary" rel="noreferrer">Contributor guides</a></li><li><a target="_blank" href="https://www.github.com/creativetimofficial/material-tailwind/blob/main/documentation/html/modal.mdx?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary" rel="noreferrer">Edit this page</a></li></ul>Community<ul class="mb-8 list-none pt-2"><li><a target="_blank" href="https://discord.com/invite/FhCJCaHdQa?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary" rel="noreferrer">Join us on Discord</a></li><li><a target="_blank" href="https://www.creative-tim.com/blog?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary" rel="noreferrer">Read blog posts</a></li><li><a target="_blank" rel="noreferrer" href="https://opencollective.com/material-tailwind?ref=material-tailwind" class="relative list-item w-full py-1 text-sm capitalize text-gray-600 transition-colors hover:text-primary focus:text-primary">Open Collective</a></li></ul>Frameworks<ul class="mb-8 list-none pt-2"><li class="mb-3"><a class="pointer-events-auto opacity-70 transition-opacity duration-300 hover:opacity-100 flex items-center gap-2" href="/docs/react/installation"><img alt="react" src="https://docs.material-tailwind.com/svg/react.svg" width="48" height="48" decoding="async" data-nimg="1" class="h-5 w-5" loading="lazy" style="color:transparent"/>React</a></li><li><a class="pointer-events-none flex items-center gap-2" href="/docs/html/installation"><img alt="html" src="https://docs.material-tailwind.com/svg/html.svg" width="48" height="48" decoding="async" data-nimg="1" class="h-5 w-5" loading="lazy" style="color:transparent"/>HTML</a></li><li class="mt-8"><a target="_blank" href="https://github.com/creativetimofficial/material-tailwind?ref=material-tailwind"><button class="align-middle select-none font-sans text-center transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none py-2 px-4 rounded-lg hover:opacity-75 focus:ring active:opacity-[0.85] relative inline-flex items-center gap-3 border-[1.5px] border-blue-gray-50 bg-white text-sm font-medium capitalize text-primary focus:ring-transparent" type="button">Give us Star</button></a></li></ul><a target="_blank" href="https://www.material-tailwind.com/roots-of-ui-ux-design?ref=material-tailwind"><div class="relative flex flex-col bg-clip-border rounded-xl bg-transparent text-gray-700 shadow-none border border-blue-gray-50"><div class="relative bg-clip-border rounded-xl overflow-hidden bg-transparent text-gray-700 shadow-none mx-4 mb-0 mt-4"><img alt="book" srcSet="/_next/image?url=https%3A%2F%2Fdocs.material-tailwind.com%2Fimage%2Fui-ux-book.jpg&w=828&q=75 1x, /_next/image?url=https%3A%2F%2Fdocs.material-tailwind.com%2Fimage%2Fui-ux-book.jpg&w=1920&q=75 2x" src="/_next/image?url=https%3A%2F%2Fdocs.material-tailwind.com%2Fimage%2Fui-ux-book.jpg&w=1920&q=75" width="768" height="768" decoding="async" data-nimg="1" class="h-full w-full object-cover" loading="lazy" style="color:transparent"/></div><div class="p-4"><h6 class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900">Roots of UI/UX Design</h6>By Creative TimLearn to Develop Intuitive Web Experiences</div></div></a></div></aside></div></div></div><footer class="relative z-50 bg-white px-8 pb-6 pt-12"><div class="container mx-auto"><div class="flex flex-wrap"><div class="w-full md:w-4/12"><h4 class="block antialiased tracking-normal font-sans text-2xl font-semibold leading-snug text-inherit mb-2 !font-semibold !text-primary">Material Tailwind</h4>Easy to use React components for Tailwind CSS and Material Design.<div class="mt-6"><a href="https://www.twitter.com/creativetim?ref=material-tailwind" target="_blank" rel="noreferrer"></a><a href="https://www.facebook.com/creativetim?ref=material-tailwind" target="_blank" rel="noreferrer"><i class="fab fa-facebook-square font-xl align-center mr-2 inline-block items-center justify-center rounded-full border-[1.5px] border-blue-gray-50 p-3 text-center text-primary outline-none focus:outline-none"></a><a href="https://www.dribbble.com/creativetim?ref=material-tailwind" target="_blank" rel="noreferrer"></a><a href="https://www.github.com/creativetimofficial?ref=material-tailwind" target="_blank" rel="noreferrer"></a><a href="https://discord.com/invite/FhCJCaHdQa?ref=material-tailwind" target="_blank" rel="noreferrer"></a></div></div><div class="ml-auto w-full px-4 md:w-7/12"><div class="items-top mb-6 flex flex-wrap"><div class="w-6/12 pt-6 md:ml-auto md:px-4 md:pt-0 xl:w-3/12">Company<ul class="list-unstyled"><li><a href="https://www.creative-tim.com/presentation?ref=material-tailwind" target="_blank" rel="noreferrer" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary">About Us</a></li><li><a href="https://www.creative-tim.com/blog?ref=material-tailwind" target="_blank" rel="noreferrer" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary">Blog</a></li><li><a href="https://github.com/creativetimofficial?ref=material-tailwind" target="_blank" rel="noreferrer" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary">Github</a></li><li><a href="https://www.creative-tim.com/templates/free?ref=material-tailwind" target="_blank" rel="noreferrer" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary">Free Products</a></li></ul></div><div class="ml-auto w-6/12 pt-6 md:px-4 md:pt-0 xl:w-3/12">Help and Support<ul class="list-unstyled"><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://www.creative-tim.com/knowledge-center?ref=material-tailwind">Knowledge Center</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://www.creative-tim.com/contact-us?ref=material-tailwind">Contact Us</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://www.creative-tim.com/support-terms?ref=material-tailwind">Premium Support</a></li><li><a rel="noreferrer" target="_self" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="/blocks#pricing">Pricing</a></li></ul></div><div class="ml-auto w-6/12 pt-6 md:px-4 md:pt-0 xl:w-3/12">Resources<ul class="list-unstyled"><li><a rel="noreferrer" target="_self" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="/docs/react/installation">Documentation</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://www.creative-tim.com/services/updivision?ref=material-tailwind">Custom Development</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://discord.com/invite/FhCJCaHdQa?ref=material-tailwind">Discord</a></li><li><a rel="noreferrer" target="_blank" class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="https://tailwindcomponents.com/?ref=material-tailwind">Tailwind Components</a></li></ul></div><div class="ml-auto w-6/12 pt-6 md:px-4 md:pt-0 xl:w-3/12">Technologies<ul class="list-unstyled"><li><a class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="/docs/react/installation">React</a></li><li><a class="block pb-2 text-sm font-normal leading-relaxed text-gray-600 transition-colors hover:text-primary" href="/docs/html/installation">HTML</a></li></ul></div></div></div></div><hr class="my-6 border-blue-gray-50"/><div class="flex flex-wrap items-center justify-center gap-2 text-center md:justify-between"><a href="https://vercel.com/?utm_source=ct-tailwind-team&utm_campaign=oss" target="_blank" rel="noopener noreferrer" class="inline-flex items-center font-semibold text-primary no-underline">Powered by<svg height="22" viewBox="0 0 283 64" fill="none"><path fill="currentColor" d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"></path></svg></a><div class="text-md mt-2 py-1 font-normal text-gray-600">Copyright © 2024 <a class="text-inherit transition-all" href="/">Material Tailwind</a> by <a href="https://www.creative-tim.com?ref=material-tailwind" target="_blank" rel="noreferrer" class="text-inherit transition-all">Creative Tim. Made with ❤️ for a better web.</a></div></div></div></footer><div class="fixed right-4 top-2/4 hidden -translate-y-2/4 lg:block"><div class="relative bg-clip-border rounded-xl bg-white text-gray-700 shadow-md group flex flex-col gap-1 border border-blue-gray-50 p-1.5"><a href="/docs/react/installation"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-sm rounded-lg border border-white hover:opacity-75 focus:ring focus:ring-white/50 active:opacity-[0.85] flex w-full items-center gap-2 px-2 py-2 text-gray-600 hover:border hover:border-blue-gray-50 hover:text-primary" type="button"><img src="https://docs.material-tailwind.com/img/logos/icon-react.svg" alt="react-icon" class="h-6 w-6"/>React</button></a><a href="/docs/html/installation"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-sm rounded-lg border border-white hover:opacity-75 focus:ring focus:ring-white/50 active:opacity-[0.85] flex w-full items-center gap-2 px-2 py-2 text-gray-600 hover:border hover:border-blue-gray-50 hover:text-primary" type="button"><img src="https://docs.material-tailwind.com/svg/tailwind.svg" alt="react-icon" class="h-6 w-6"/>Tailwind CSS</button></a><a href="/figma"><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-sm rounded-lg border border-white hover:opacity-75 focus:ring focus:ring-white/50 active:opacity-[0.85] flex w-full items-center gap-2 px-2 py-2 text-gray-600 hover:border hover:border-blue-gray-50 hover:text-primary" type="button"><img src="https://docs.material-tailwind.com/img/icon-figma.svg" alt="react-icon" class="h-6 w-6"/>Figma</button></a></div></div><script defer="" src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script><script defer="" chat-hash="j2rbsnzetxp03odoe7qxbwl" src="https://widget.galichat.com/gali-embeded.min.js"></script></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"frontMatter":{"title":"Tailwind CSS Modal - Material Tailwind","description":"Customise your web projects with our easy-to-use modal component for Tailwind CSS using Material Design guidelines.","navigation":["modal","modal-sizes","web-3-modal","modal-custom-animation","modal-with-form","modal-with-image"],"github":"modal","prev":"menu","next":"navbar"},"mdxSource":{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n h1: \"h1\",\n p: \"p\",\n strong: \"strong\",\n code: \"code\",\n h3: \"h3\",\n h2: \"h2\",\n div: \"div\",\n pre: \"pre\",\n span: \"span\",\n hr: \"hr\",\n table: \"table\",\n thead: \"thead\",\n tr: \"tr\",\n th: \"th\",\n tbody: \"tbody\",\n td: \"td\"\n }, _provideComponents(), props.components), {Code, CodePreview, HTMLModalExamples} = _components;\n if (!Code) _missingMdxReference(\"Code\", true);\n if (!CodePreview) _missingMdxReference(\"CodePreview\", true);\n if (!HTMLModalExamples) _missingMdxReference(\"HTMLModalExamples\", false);\n if (!HTMLModalExamples.ModalCustomAnimation) _missingMdxReference(\"HTMLModalExamples.ModalCustomAnimation\", true);\n if (!HTMLModalExamples.ModalDefault) _missingMdxReference(\"HTMLModalExamples.ModalDefault\", true);\n if (!HTMLModalExamples.ModalSizes) _missingMdxReference(\"HTMLModalExamples.ModalSizes\", true);\n if (!HTMLModalExamples.ModalWithForm) _missingMdxReference(\"HTMLModalExamples.ModalWithForm\", true);\n if (!HTMLModalExamples.ModalWithImage) _missingMdxReference(\"HTMLModalExamples.ModalWithImage\", true);\n if (!HTMLModalExamples.Web3Modal) _missingMdxReference(\"HTMLModalExamples.Web3Modal\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.h1, {\n children: \"Tailwind CSS Modal\"\n }), \"\\n\", _jsx(\"a\", {\n href: \"/docs/html/modal#required-script\",\n className: \"mb-6 mt-2 block\",\n children: _jsxs(\"div\", {\n class: \"inline-flex items-center bg-slate-100 hover:bg-slate-200 transition-all p-1 pr-4 text-sm text-slate-700 rounded-full\",\n children: [_jsx(\"span\", {\n class: \"mr-2 inline-flex justify-center items-center w-8 h-8 rounded-full bg-white shadow-md text-orange-500\",\n children: _jsx(\"svg\", {\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\",\n fill: \"currentColor\",\n class: \"w-5 h-5\",\n children: _jsx(\"path\", {\n \"fill-rule\": \"evenodd\",\n d: \"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z\",\n \"clip-rule\": \"evenodd\"\n })\n })\n }), _jsx(\"span\", {\n children: \"Requires extra Javascript Scripts\"\n })]\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Use our Tailwind CSS \", _jsx(_components.strong, {\n children: \"modal\"\n }), \" component to inform users about tasks or important information that require decisions or involve multiple steps.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"A modal is a window that displays critical information, disabling all app functionality when it appears, and remains on screen until confirmed or dismissed.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"See below our modal examples styled with Tailwind CSS that you can use for your web or mobile apps.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"To initialize a new modal:\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Add \", _jsxs(Code, {\n children: [\"data-dialog-target=\\\"\", _jsx(_components.code, {\n children: \"{modal}\"\n }), \"\\\"\"]\n }), \" to the trigger element. Add \", _jsxs(Code, {\n children: [\"data-dialog-backdrop=\\\"\", _jsx(_components.code, {\n children: \"{modalName}\"\n }), \"\\\"\"]\n }), \" to the backdrop element. Add \", _jsxs(Code, {\n children: [\"data-dialog=\\\"\", _jsx(_components.code, {\n children: \"{modalName}\"\n }), \"\\\"\"]\n }), \" to the modal element itself.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Make sure that the values for these data attributes are the same.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"To close the modal when an element is clicked, add \", _jsx(Code, {\n children: \"data-dialog-close=\\\"true\\\"\"\n }), \" to that element.\"]\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.h3, {\n children: \"Modal Examples:\"\n }), \"\\n\", _jsx(_components.h2, {\n children: \"Default Modal\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This coded example demonstrates a modal component; it includes a trigger button, a backdrop, and\\ncustomizable styling for the modal's content and actions. Upon clicking the \\\"Open Modal\\\" button,\\nthe modal is rendered over the backdrop, ensuring a focused interaction for the user. The content and\\nbehavior can be easily adjusted to suit your website's requirements.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"modal\",\n link: \"modal#modal\",\n component: _jsx(HTMLModalExamples.ModalDefault, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Open Modal\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Its a simple Modal\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" The key to more success is to have a lot of pillows. Put it this\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" way, it took me twenty five years to get these plants, twenty five\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" years of blood sweat and tears, and I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m never giving up,\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m just getting started. I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m up to something. Fan luv.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 flex-wrap items-center pt-4 justify-end\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Cancel\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Confirm\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Modal Sizes\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"You can set the size of the modal on your own using the Tailwind CSS classes. We already made some default sizes for you,\\ncheck the examples below for implementation details.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"modal-sizes\",\n link: \"modal#sizes\",\n component: _jsx(HTMLModalExamples.ModalSizes, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-3 flex gap-3\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-xs\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Open Modal XS\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-xs\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-xs\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-4 p-4 w-1/4 rounded-lg bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Its a simple modal.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" The key to more success is to have a lot of pillows. Put it this\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" way, it took me twenty five years to get these plants, twenty five\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" years of blood sweat and tears, and I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m never giving up,\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m just getting started. I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m up to something. Fan luv.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 flex-wrap items-center pt-4 justify-end\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Cancel\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Confirm\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Open Modal SM\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-4 p-4 w-1/3 rounded-lg bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Its a simple modal.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" The key to more success is to have a lot of pillows. Put it this\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" way, it took me twenty five years to get these plants, twenty five\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" years of blood sweat and tears, and I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m never giving up,\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m just getting started. I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m up to something. Fan luv.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 flex-wrap items-center pt-4 justify-end\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Cancel\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Confirm\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-md\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Open Modal MD\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-md\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-md\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-4 p-4 w-2/5 rounded-lg bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Its a simple modal.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" The key to more success is to have a lot of pillows. Put it this\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" way, it took me twenty five years to get these plants, twenty five\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" years of blood sweat and tears, and I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m never giving up,\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m just getting started. I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m up to something. Fan luv.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 flex-wrap items-center pt-4 justify-end\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Cancel\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Confirm\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-3 flex gap-3\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-lg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Open Modal LG\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-lg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-lg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-4 p-4 w-3/5 rounded-lg bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Its a simple modal.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" The key to more success is to have a lot of pillows. Put it this\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" way, it took me twenty five years to get these plants, twenty five\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" years of blood sweat and tears, and I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m never giving up,\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m just getting started. I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m up to something. Fan luv.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 flex-wrap items-center pt-4 justify-end\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Cancel\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Confirm\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-xl\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Open Modal XL\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-xl\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-xl\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-4 p-4 w-3/4 rounded-lg bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Its a simple modal.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" The key to more success is to have a lot of pillows. Put it this\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" way, it took me twenty five years to get these plants, twenty five\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" years of blood sweat and tears, and I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m never giving up,\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m just getting started. I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m up to something. Fan luv.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 flex-wrap items-center pt-4 justify-end\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Cancel\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Confirm\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"dialog-xxl\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Open Modal XXL\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-xxl\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal-xxl\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative w-screen h-screen bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Its a simple modal.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" The key to more success is to have a lot of pillows. Put it this\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" way, it took me twenty five years to get these plants, twenty five\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" years of blood sweat and tears, and I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m never giving up,\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m just getting started. I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m up to something. Fan luv.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 flex-wrap items-center pt-4 justify-end\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Cancel\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Confirm\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Web 3.0 Modal\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This example of a modal component is for connecting a Web 3.0 wallet to a web application.\\nIt features a button to open the modal, a backdrop, wallet options, and additional informational elements.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"web-3-modal\",\n link: \"modal#web-3-modal\",\n component: _jsx(HTMLModalExamples.Web3Modal, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"web-3-modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Connect Web 3.0 Wallet\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"web-3-modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-4 w-1/4 rounded-lg bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"web-3-modal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-start justify-between p-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-xl font-medium text-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Connect Web 3.0 Wallet\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h5\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-slate-500 text-sm font-light\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Choose which card you want to connect\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-ripple-dark\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-blue-gray-500 transition-all hover:bg-blue-gray-500/10 active:bg-blue-gray-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 24 24\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"2\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-5 w-5\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linecap\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-linejoin\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"round\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M6 18L18 6M6 6l12 12\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative px-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mb-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pt-3 text-xs uppercase text-slate-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Popular\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full mt-3 rounded-md flex items-center justify-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"img\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"https://docs.material-tailwind.com/icons/metamask.svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"metamask\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-5 w-5 mr-2\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Connect Wallet\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full mt-2 rounded-md flex items-center justify-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"img\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"https://docs.material-tailwind.com/icons/coinbase.svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"metamast\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-5 w-5 mr-2 rounded-md\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Connect with Coinbase\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pt-3 text-xs uppercase text-slate-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Other\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"mt-3 w-full rounded-md flex items-center justify-center border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"img\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"https://docs.material-tailwind.com/icons/trust-wallet.svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"metamast\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-5 w-5 rounded-md mr-2 border border-slate-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Connect with Trust Wallet\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex flex-wrap items-center justify-between gap-2 p-4 text-blue-gray-500 mt-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-sm text-slate-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" New to Ethereum wallets?\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Learn More\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Modal with Custom Animation\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"You can modify the open/close state animations for the modal by adding the\\n\", _jsxs(Code, {\n children: [\"data-dialog-mount=\\\"\", _jsx(_components.code, {\n children: \"{opacity-100}\"\n }), \"\\\"\"]\n }), \", \", _jsxs(Code, {\n children: [\"data-dialog-unmount=\\\"\", _jsx(_components.code, {\n children: \"{opacity-0}\"\n }), \"\\\"\"]\n }), \"\\nand \", _jsxs(Code, {\n children: [\"data-dialog-transition=\\\"\", _jsx(_components.code, {\n children: \"{transition-opacity}\"\n }), \"\\\"\"]\n }), \" data attributes to the modal\\ncomponent. You can pass Tailwind CSS classnames for those data attributes for animating the modal.\\nCheck more about animation data attributes for modal \", _jsx(\"a\", {\n className: \"hover:text-blue-500 font-medium\",\n href: \"#dialog-data-attributes\",\n children: \"here\"\n }), \".\"]\n }), \"\\n\", _jsx(CodePreview, {\n id: \"custom-modal-animation\",\n link: \"modal#custom-modal-animation\",\n component: _jsx(HTMLModalExamples.ModalCustomAnimation, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"animated-modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Open Animation Modal\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"animated-modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"animated-modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-mount\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"opacity-100 translate-y-0 scale-100\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-unmount\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"opacity-0 -translate-y-28 scale-90 pointer-events-none\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-transition\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"transition-all duration-300\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Custom Animation Modal\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" The key to more success is to have a lot of pillows. Put it this\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" way, it took me twenty five years to get these plants, twenty five\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" years of blood sweat and tears, and I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m never giving up,\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m just getting started. I\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"m up to something. Fan luv.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 flex-wrap items-center pt-4 justify-end\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Cancel\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Confirm\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Modal with Form\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use the example below to create a modal with a Sign In form, Register form, or any other form like CRUD examples.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"modal-with-form\",\n link: \"modal#modal-with-form\",\n component: _jsx(HTMLModalExamples.ModalWithForm, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sign-in-modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Open Modal Form\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sign-in-modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"sign-in-modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative mx-auto w-full max-w-[24rem] rounded-lg overflow-hidden shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative flex flex-col bg-white\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-2.5 items-center flex justify-center text-white h-24 rounded-md bg-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h3\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-2xl\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Sign In\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h3\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex flex-col gap-4 p-6\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full max-w-sm min-w-[200px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"block mb-2 text-sm text-slate-600\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Email\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"input\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"email\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placeholder\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Your Email\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full max-w-sm min-w-[200px]\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"block mb-2 text-sm text-slate-600\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Password\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"input\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"password\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"placeholder\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"Your Password\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"inline-flex items-center mt-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center cursor-pointer relative\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"htmlFor\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"check-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"input\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"checkbox\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow hover:shadow-md border border-slate-300 checked:bg-slate-800 checked:border-slate-800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"id\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"check-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"absolute text-white opacity-0 pointer-events-none peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-3.5 w-3.5\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 20 20\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"stroke-width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"1\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"clip-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"cursor-pointer ml-2 text-slate-600 text-sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"htmlFor\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"check-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Remember Me\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"label\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"p-6 pt-0\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-full rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Sign In\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex justify-center mt-6 text-sm text-slate-600\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Don\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026apos;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"t have an account?\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"#signup\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"ml-1 text-sm font-semibold text-slate-700 underline\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Sign up\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"a\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Modal with Image\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use the example below to create a modal with an image inside (you can find your images on Unsplash) and other details.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"modal-with-image\",\n link: \"modal#modal-with-image\",\n component: _jsx(HTMLModalExamples.ModalWithImage, {}),\n children: _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative flex h-64 w-96 cursor-pointer flex-col overflow-hidden rounded-lg bg-white bg-clip-border shadow-sm transition-opacity hover:opacity-90\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-target\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"image-modal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"img\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"nature\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-full w-full object-cover object-center\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"auto=format\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"fit=crop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"w=2717\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"q=80\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"image-modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog-backdrop-close\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative m-4 w-2/4 rounded-lg bg-white shadow-sm\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"role\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"modal\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"data-dialog\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"image-modal\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center justify-between p-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-3\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"img\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"tania andrew\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=1300\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"q=80\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative inline-block h-9 w-9 rounded-full object-cover object-center\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"-mt-px flex flex-col\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-sm text-slate-800 font-medium\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Tania Andrew\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-xs font-normal text-slate-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" @andrew\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-2\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md border border-transparent p-2.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 24 24\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"w-4 h-4\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Free Download\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"relative border-b border-t border-b-blue-gray-100 border-t-blue-gray-100 p-0 font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"img\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"nature\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-[30rem] w-full object-cover object-center\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"auto=format\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"fit=crop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"w=2717\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026amp;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"q=80\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" /\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex shrink-0 flex-wrap items-center justify-between p-4 text-blue-gray-500\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center gap-16\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-slate-500 text-sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Views\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-slate-800 font-medium\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" 44,082,044\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-slate-500 text-sm\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Downloads\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"text-slate-800 font-medium\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" 553,031\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"p\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"flex items-center rounded-md border border-slate-300 py-2 px-4 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"button\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"xmlns\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"http://www.w3.org/2000/svg\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"viewBox\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"0 0 24 24\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"currentColor\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"aria-hidden\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"true\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"class\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"h-4 w-4 mr-1.5\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"fill-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"d\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"M15.75 4.5a3 3 0 11.825 2.066l-8.421 4.679a3.002 3.002 0 010 1.51l8.421 4.679a3 3 0 11-.729 1.31l-8.421-4.678a3 3 0 110-4.132l8.421-4.679a3 3 0 01-.096-.755z\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"clip-rule\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"evenodd\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003e\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"path\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"svg\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Share\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"button\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"div\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Modal Trigger Data Attributes\"\n }), \"\\n\", _jsx(\"span\", {\n id: \"dialog-trigger-data-attributes\",\n className: \"scroll-mt-48\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"The following data attributes are available for modal trigger element.\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"Attribute\"\n }), _jsx(_components.th, {\n children: \"Description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"data-dialog-target\"\n })\n }), _jsxs(_components.td, {\n children: [\"Set the modal target element, it should be the same as the \", _jsx(_components.code, {\n children: \"data-dialog\"\n }), \" \", _jsx(\"br\", {}), \" and \", _jsx(_components.code, {\n children: \"data-dialog-backdrop\"\n }), \" data attributes.\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"data-dialog-close\"\n })\n }), _jsxs(_components.td, {\n children: [\"It's an optional data attribute, you can set it for any element and it will turn the element \", _jsx(\"br\", {}), \" to a close trigger for modal when click event happened on that element.\"]\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Modal Backdrop Data Attributes\"\n }), \"\\n\", _jsx(\"span\", {\n id: \"dialog-backdrop-data-attributes\",\n className: \"scroll-mt-48\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"The following data attributes are available for modal backdrop element.\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"Attribute\"\n }), _jsx(_components.th, {\n children: \"Description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"data-dialog-backdrop\"\n })\n }), _jsxs(_components.td, {\n children: [\"Set the modal backdrop element, it should be the same as the \", _jsx(_components.code, {\n children: \"data-dialog\"\n }), \" \", _jsx(\"br\", {}), \" and \", _jsx(_components.code, {\n children: \"data-dialog-target\"\n }), \" data attributes.\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"data-dialog-backdrop-close\"\n })\n }), _jsx(_components.td, {\n children: \"Sets whether to close modal when clicking on it's backdrop or not.\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Modal Data Attributes\"\n }), \"\\n\", _jsx(\"span\", {\n id: \"dialog-data-attributes\",\n className: \"scroll-mt-48\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"The following data attributes are available for modal element.\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"Attribute\"\n }), _jsx(_components.th, {\n children: \"Description\"\n }), _jsx(_components.th, {\n children: \"Default\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"data-dialog\"\n })\n }), _jsxs(_components.td, {\n children: [\"Set the name of the modal and reference it to the \", _jsx(\"br\", {}), \" modal trigger and backdrop elements.\"]\n }), _jsx(_components.td, {})]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"data-popover-mount\"\n })\n }), _jsxs(_components.td, {\n children: [\"Set the classnaes that should be used when the \", _jsx(\"br\", {}), \" modal is visible.\"]\n }), _jsxs(_components.td, {\n children: [_jsx(Code, {\n children: \"opacity-1\"\n }), _jsx(\"br\", {}), _jsx(Code, {\n children: \"translate-y-0\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"data-popover-unmount\"\n })\n }), _jsxs(_components.td, {\n children: [\"Set the classnaes that should be used when the \", _jsx(\"br\", {}), \" modal is hidden.\"]\n }), _jsxs(_components.td, {\n children: [_jsx(Code, {\n children: \"opacity-0\"\n }), _jsx(\"br\", {}), _jsx(Code, {\n children: \"-translate-y-14\"\n }), _jsx(\"br\", {}), _jsx(Code, {\n children: \"pointer-events-none\"\n })]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.code, {\n children: \"data-popover-transition\"\n })\n }), _jsxs(_components.td, {\n children: [\"Set the classnaes that should be used for \", _jsx(\"br\", {}), \" transition of the modal.\"]\n }), _jsxs(_components.td, {\n children: [_jsx(Code, {\n children: \"transition-all\"\n }), _jsx(\"br\", {}), _jsx(Code, {\n children: \"duration-300\"\n })]\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Required Scripts\"\n }), \"\\n\", _jsx(\"span\", {\n id: \"required-script\",\n className: \"scroll-mt-56\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"The modal component needs a required script file to work, you just need to add the below script file to the bottom of your html file.\"\n }), \"\\n\", _jsx(_components.div, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.pre, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.code, {\n \"data-language\": \"html\",\n \"data-theme\": \"default\",\n children: [_jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#8B949E\"\n },\n children: \"\u003c!-- from node_modules --\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"script\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"node_modules/@material-tailwind/html@latest/scripts/dialog.js\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"script\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#8B949E\"\n },\n children: \"\u003c!-- from cdn --\u003e\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"script\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"https://unpkg.com/@material-tailwind/html@latest/scripts/dialog.js\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"script\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(\"span\", {\n id: \"more-examples\"\n }), \"\\n\", _jsx(_components.h2, {\n children: \"Explore More Tailwind CSS Examples\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Check out more modal component examples from \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks\",\n target: \"_blank\",\n children: \"Material Tailwind Blocks\"\n }), \":\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"• \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks/modals\",\n target: \"_blank\",\n children: \"Modals\"\n }), _jsx(\"br\", {}), \"\\n• \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks/popup-sections\",\n target: \"_blank\",\n children: \"Popup Blocks\"\n }), _jsx(\"br\", {})]\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(\"span\", {\n id: \"best-practices\"\n }), \"\\n\", _jsx(_components.h2, {\n children: \"Modal Best Practices for Developers\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"• Prioritize user experience by making modals unobtrusive and easy to dismiss.\", _jsx(\"br\", {}), \"\\n• Include clear and easily accessible close buttons, and allow users to close the modal by clicking outside it.\", _jsx(\"br\", {}), \"\\n• Maintain a consistent design language and layout across modals to create a familiar user experience.\", _jsx(\"br\", {}), \"\\n• Use subtle animations and transitions to open and close modals smoothly. Make sure that animations do not distract users.\", _jsx(\"br\", {}), \"\\n• Implement validation and error handling for form elements within the modal.\", _jsx(\"br\", {})]\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{},"scope":{}},"slug":["html","modal"]},"__N_SSG":true},"page":"/docs/[...slug]","query":{"slug":["html","modal"]},"buildId":"7xyavH52hdVKj4bs-JAX1","assetPrefix":"https://docs.material-tailwind.com","isFallback":false,"gsp":true,"scriptLoader":[]}</script><script async="" defer="" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script></body></html>

CINXE.COM

Tailwind CSS Modal - Material Tailwind