Tailwind CSS Card - Material Tailwind

<!DOCTYPE html><html lang="en" class="scroll-smoot <p class="block antialiased font-sans text-base font-light leading-relaxed <h3 class="block antialiased tracking-normal font-sans text-xl <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <h2 class="block antialiased tracking-normal font-sans text-2xl <p class="block antialiased font-sans text-base font-light leading-relaxed <p class="block antialiased font-sans text-base font-light leading-relaxed • Input fields for email and password, styled with a modern, floating • A "Remember Me" option with a custom-styled checkbox.& • A prominent sign-in button that matches the header's gradient, • A link for users who don't have an account yet, encouraging <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <h2 class="block antialiased tracking-normal font-sans text-2xl <h2 class="block antialiased tracking-normal font-sans text-2xl <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <div id="card-with-list" class="scroll-mt-64 overflow-hidden <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <p class="block antialiased font-sans text-base font-light leading-relaxed It is useful for displaying contextually important information that the <div id="card-with-centered-content" class="scroll-mt-64 <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <p class="block antialiased font-sans text-base font-light leading-relaxed It is useful for showing a placeholder for the card when there is no data <div id="card-with-placeholder" class="scroll-mt-64 <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <p class="block antialiased font-sans text-base font-light leading-relaxed It is useful for showing a scrollable area for the card when there is <div id="card-with-scroll-area" class="scroll-mt-64 <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <hr class="!mb-12 !mt-16 border-transparent"/> <h2 class="block antialiased tracking-normal font-sans text-2xl <p class="block antialiased font-sans text-base font-light leading-relaxed <p class="block antialiased font-sans text-base font-light leading-relaxed • <a href="https://www.material-tailwind.com/blocks/web3-cards" • <a href="https://www.material-tailwind.com/blocks/kpi-cards" • <a href="https://www.material-tailwind.com/blocks/pricing-sections" <hr class="!mb-12 !mt-16 border-transparent"/> <h3 class="block antialiased tracking-normal font-sans text-xl <p class="block antialiased font-sans text-base font-light leading-relaxed • Choose high-quality, relevant images that complement the card's • Organize content within a card to reflect a clear hierarchy of • Avoid overcrowding cards with too much information or too many • Offer visual feedback on interaction. • Design card components to be reusable across different parts of <head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Tailwind CSS Card - Material Tailwind</title><meta name="description" content="Use our card examples styled with Tailwind CSS to include detailed information like a photo, text, and a link about a single subject."/><link rel="canonical" href="https://www.material-tailwind.com/docs/html/card"/><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/25ff971631605ab7.css" as="style"/><link rel="stylesheet" href="https://docs.material-tailwind.com/_next/static/css/25ff971631605ab7.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-1fa054fec924a10f.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-3bf1602173db52f8.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-4ed7d3826705e2f4.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-b9e5e51fade074b1.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/chunks/pages/docs/%5B...slug%5D-8e1a8e3043e2059b.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/Hmxk9y-rTbot2nv4Ta3ZE/_buildManifest.js" defer=""></script><script src="https://docs.material-tailwind.com/_next/static/Hmxk9y-rTbot2nv4Ta3ZE/_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-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbGmQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabWmQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bWmQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammQ.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZtammQ.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:100;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBHMdazTgWw.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBHMdazTgWw.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.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-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v47/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.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/v143/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/v143/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 <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></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] !max-w-[180px]"><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-gray-500 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 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 normal-case" 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 <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></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] !max-w-[180px]"><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-gray-500 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 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 normal-case" 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">card</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></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 Card</h1> text-inherit !mb-4 !font-normal !text-gray-600">Use our cards to provide a flexible and extensible content container based on Tailwind CSS with multiple variants and options. text-inherit !mb-4 !font-normal !text-gray-600">By its definition, a card is a sheet of material that serves as an entry point to more detailed information. Cards usually include a photo, text, and a link about a single subject. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy. text-inherit !mb-4 !font-normal !text-gray-600">See below our beautiful Tailwind CSS card examples that you can use in your web and app projects. font-semibold leading-snug !mb-2 text-primary">Card Examples:</h3> font-semibold leading-snug !mb-2 text-primary">Default Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">This versatile card component example contains an image, title, text, and button, being suitable for a wide range of web design applications. The utility classes from Tailwind CSS ensure that the card is responsive and can adjust to different screen sizes. 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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"><img src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" alt="card-image"/></div><div class="p-4"><h6 class="mb-2 text-slate-800 text-xl font-semibold">Website Review Check</h6>The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.</div><div class="px-4 pb-4 pt-0 mt-2"><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">Read more</button></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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"> <img src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="card-image" /> </div> <div class="p-4"> <h6 class="mb-2 text-slate-800 text-xl font-semibold"> Website Review Check </h6> <p class="text-slate-600 leading-normal font-light"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to &quot;Naviglio&quot; where you can enjoy the main night life in Barcelona. </p> </div> <div class="px-4 pb-4 pt-0 mt-2"> <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"> Read more </button> </div> </div> </code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Simple Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this card example with clean design for article summaries, product/ service highlights, event descriptions, or user testimonials. It features a clear hierarchy of text, comfortable spacing, and a button for action. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="p-4"><h5 class="mb-2 text-slate-800 text-xl font-semibold">Website Review Check Update from Our Team in San Francisco</h5>The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.<button class="rounded-md bg-slate-800 py-2 px-4 mt-6 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">Read more</button></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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="p-4"> <h5 class="mb-2 text-slate-800 text-xl font-semibold"> Website Review Check Update from Our Team in San Francisco </h5> <p class="text-slate-600 leading-normal font-light"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona. </p> <button class="rounded-md bg-slate-800 py-2 px-4 mt-6 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"> Read more </button> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Card with Link</h2> text-inherit !mb-4 !font-normal !text-gray-600">The design elements such as the SVG icon, text content, and interactive button, combined with the clean and modern styling provided by Tailwind CSS, make this card example versatile and adaptable to a wide range of uses. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-6"><div class="flex items-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-slate-600"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"></path></svg><h5 class="ml-3 text-slate-800 text-xl font-semibold">Website Review Check</h5></div>Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others.<div><a href="#" class="text-slate-800 font-semibold text-sm hover:underline flex items-center">Learn More<svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg></a></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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-6"> <div class="flex items-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-slate-600"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" /> </svg> <h5 class="ml-3 text-slate-800 text-xl font-semibold"> Website Review Check </h5> </div> <p class="block text-slate-600 leading-normal font-light mb-4"> Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others. </p> <div> <a href="#" class="text-slate-800 font-semibold text-sm hover:underline flex items-center"> Learn More <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> </a> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Header</h2> text-inherit !mb-4 !font-normal !text-gray-600">You can always add additional information to a regular card. Usually these are secondary details about the main topic of the card. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-1">Header for the card</div><div class="p-4"><h5 class="mb-2 text-slate-800 text-xl font-semibold">Website Review Check Update from Our Team in San Francisco</h5>The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.</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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-1"> <span class="text-sm text-slate-600 font-medium"> Header for the card </span> </div> <div class="p-4"> <h5 class="mb-2 text-slate-800 text-xl font-semibold"> Website Review Check Update from Our Team in San Francisco </h5> <p class="text-slate-600 leading-normal font-light"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona. </p> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Footer</h2> text-inherit !mb-4 !font-normal !text-gray-600">At the end of the card, add additional information that are as a secondary source of information. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="p-4"><h5 class="mb-2 text-slate-800 text-xl font-semibold">Website Review Check Update from Our Team in San Francisco</h5>The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.</div><div class="mx-3 border-t border-slate-200 pb-3 pt-2 px-1">Last updated: 4 hours ago</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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="p-4"> <h5 class="mb-2 text-slate-800 text-xl font-semibold"> Website Review Check Update from Our Team in San Francisco </h5> <p class="text-slate-600 leading-normal font-light"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona. </p> </div> <div class="mx-3 border-t border-slate-200 pb-3 pt-2 px-1"> <span class="text-sm text-slate-600 font-medium"> Last updated: 4 hours ago </span> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Header & Footer</h2> text-inherit !mb-4 !font-normal !text-gray-600">This card example features a structured layout with a defined header, body, and footer section, perfect for organizing content clearly. The header usually contains the card title, icons, or action buttons, whereas the footer can include call-to-action buttons, additional links, or additional information. overflow-hidden rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-1">Header for the card</div><div class="p-4"><h5 class="mb-2 text-slate-800 text-xl font-semibold">Website Review Check Update from Our Team in San Francisco</h5>The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.</div><div class="mx-3 border-t border-slate-200 pb-3 pt-2 px-1">Last updated: 4 hours ago</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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-1"> <span class="text-sm font-medium text-slate-600"> Header for the card </span> </div> <div class="p-4"> <h5 class="mb-2 text-slate-800 text-xl font-semibold"> Website Review Check Update from Our Team in San Francisco </h5> <p class="text-slate-600 leading-normal font-light"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona. </p> </div> <div class="mx-3 border-t border-slate-200 pb-3 pt-2 px-1"> <span class="text-sm text-slate-600 font-medium"> Last updated: 4 hours ago </span> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Profile Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">This card example is ideal for introducing individuals, such as team members, employees, or speakers at an event, on a company website, event page, or within an app. rounded-xl border border-blue-gray-50 bg-white mt-4"><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="flex flex-col bg-white shadow-sm border border-slate-200 rounded-lg my-6 w-96"><div class="m-2.5 overflow-hidden rounded-md h-80 flex justify-center items-center"><img class="w-full h-full object-cover" src="https://docs.material-tailwind.com/img/team-3.jpg" alt="profile-picture"/></div><div class="p-6 text-center"><h4 class="mb-1 text-xl font-semibold text-slate-800">Natalie Paisley</h4>Product ManagerThe place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.</div><div class="flex justify-center p-6 pt-2 gap-7"><button class="min-w-32 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">Follow</button></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="flex flex-col bg-white shadow-sm border border-slate-200 rounded-lg my-6 w-96"> <div class="m-2.5 overflow-hidden rounded-md h-80 flex justify-center items-center"> <img class="w-full h-full object-cover" src="https://docs.material-tailwind.com/img/team-3.jpg" alt="profile-picture" /> </div> <div class="p-6 text-center"> <h4 class="mb-1 text-xl font-semibold text-slate-800"> Natalie Paisley </h4> <p class="text-sm font-semibold text-slate-500 uppercase"> Product Manager </p> <p class="text-base text-slate-600 mt-4 font-light "> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona. </p> </div> <div class="flex justify-center p-6 pt-2 gap-7"> <button class="min-w-32 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"> Follow </button> </div> </div></code></pre></div></div></div> text-inherit !mb-4 !font-normal !text-gray-600">The design of this card features rounded-xl corners, shadow for depth, and gradient text for the role description. font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Login Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this card example for building login pages where users need to enter their credentials (email and password) to access their accounts. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col bg-white shadow-sm border border-slate-200 w-96 rounded-lg my-6"><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 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 flex-col bg-white shadow-sm border border-slate-200 w-96 rounded-lg my-6"> <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" /> <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" 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> <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></code></pre></div></div></div> text-inherit !mb-4 !font-normal !text-gray-600">This component features: text-inherit !mb-4 !font-normal !text-gray-600">• A header with a gradient background and a "Sign In" title. label animation that improves usability and aesthetics. lt;br/> making the call to action (CTA) clear. new user registration. font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Pricing Card Dark</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this dark card example if you want to implement different subscription tiers or plans, highlighting the features, support, and pricing details of each option to help users choose the one that best fits their needs. 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="flex flex-col rounded-lg bg-slate-800 shadow-sm max-w-96 p-8 my-6 border border-slate-600"><div class="pb-8 m-0 mb-8 text-center text-slate-100 border-b border-slate-600">standard<h1 class="flex justify-center gap-1 mt-4 font-bold text-white text-6xl">$29/mo</h1></div><div class="p-0"><ul class="flex flex-col gap-4"><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>5 team members</li><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>200+ components</li><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>40+ built-in pages</li><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>1 year free updates</li><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>Lifetime technical support</li></ul></div><div class="p-0 mt-12"><button class="min-w-32 w-full rounded-md bg-white py-2 px-4 border border-transparent text-center text-sm text-slate-600 transition-all shadow-md hover:shadow-lg focus:bg-white/90 focus:shadow-none active:bg-white/90 hover:bg-white/90 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Buy Now</button></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="flex flex-col rounded-lg bg-slate-800 shadow-sm max-w-96 p-8 my-6 border border-slate-600"> <div class="pb-8 m-0 mb-8 text-center text-slate-100 border-b border-slate-600"> <p class="text-sm uppercase font-semibold text-slate-300"> standard </p> <h1 class="flex justify-center gap-1 mt-4 font-bold text-white text-6xl"> <span class="text-3xl">$</span>29 <span class="self-end text-3xl">/mo</span> </h1> </div> <div class="p-0"> <ul class="flex flex-col gap-4"> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-500 bg-slate-700"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-300"> 5 team members </p> </li> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-500 bg-slate-700"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-300"> 200+ components </p> </li> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-500 bg-slate-700"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-300"> 40+ built-in pages </p> </li> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-500 bg-slate-700"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-300"> 1 year free updates </p> </li> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-500 bg-slate-700"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-300"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-300"> Lifetime technical support </p> </li> </ul> </div> <div class="p-0 mt-12"> <button class="min-w-32 w-full rounded-md bg-white py-2 px-4 border border-transparent text-center text-sm text-slate-600 transition-all shadow-md hover:shadow-lg focus:bg-white/90 focus:shadow-none active:bg-white/90 hover:bg-white/90 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Buy Now </button> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Pricing Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this card example if you want to implement different subscription tiers or plans, highlighting the features, support, and pricing details of each option to help users choose the one that best fits their needs. 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="flex flex-col rounded-lg bg-white shadow-sm max-w-96 p-8 my-6 border border-slate-200"><div class="pb-8 m-0 mb-8 text-center text-slate-800 border-b border-slate-200">standard<h1 class="flex justify-center gap-1 mt-4 font-bold text-slate-800 text-6xl">$29/mo</h1></div><div class="p-0"><ul class="flex flex-col gap-4"><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>5 team members</li><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>200+ components</li><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>40+ built-in pages</li><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>1 year free updates</li><li class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>Life time technical support</li></ul></div><div class="p-0 mt-12"><button class="min-w-32 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">Buy Now</button></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="flex flex-col rounded-lg bg-white shadow-sm max-w-96 p-8 my-6 border border-slate-200"> <div class="pb-8 m-0 mb-8 text-center text-slate-800 border-b border-slate-200"> <p class="text-sm uppercase font-semibold text-slate-500"> standard </p> <h1 class="flex justify-center gap-1 mt-4 font-bold text-slate-800 text-6xl"> <span class="text-3xl">$</span>29 <span class="self-end text-3xl">/mo</span> </h1> </div> <div class="p-0"> <ul class="flex flex-col gap-4"> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-200 bg-slate-50"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-500"> 5 team members </p> </li> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-200 bg-slate-50"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-500"> 200+ components </p> </li> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-200 bg-slate-50"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-500"> 40+ built-in pages </p> </li> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-200 bg-slate-50"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-500"> 1 year free updates </p> </li> <li class="flex items-center gap-4"> <span class="p-1 border rounded-full border-slate-200 bg-slate-50"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-slate-600"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path> </svg> </span> <p class="text-slate-500"> Life time technical support </p> </li> </ul> </div> <div class="p-0 mt-12"> <button class="min-w-32 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"> Buy Now </button> </div> </div> </code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Blog Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">This card example is ideal for highlighting recent or featured posts on a blog. It includes an image, a headline, a content summary , and a date stamp to indicate when it was published or last updated. rounded-xl border border-blue-gray-50 bg-white mt-4"><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"><a href="javascript:void(0)"><div class="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"><img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80" alt="card-image"/></div><div class="p-4"><div class="mb-4 rounded-full bg-cyan-600 py-0.5 px-2.5 border border-transparent text-xs text-white transition-all shadow-sm w-20 text-center">POPULAR</div><h6 class="mb-2 text-slate-800 text-xl font-semibold">Website Review Check</h6>The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.</div><div class="flex items-center justify-between p-4"><div class="flex items-center"><img alt="Tania Andrew" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" class="relative inline-block h-8 w-8 rounded-full"/><div class="flex flex-col ml-3 text-sm">Lewis DanielJanuary 10, 2024</div></div></div></div></a></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"><a href="javascript:void(0)"> <div class="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"> <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1471&amp;q=80" alt="card-image" /> </div> <div class="p-4"> <div class="mb-4 rounded-full bg-cyan-600 py-0.5 px-2.5 border border-transparent text-xs text-white transition-all shadow-sm w-20 text-center"> POPULAR </div> <h6 class="mb-2 text-slate-800 text-xl font-semibold"> Website Review Check </h6> <p class="text-slate-600 leading-normal font-light"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to &quot;Naviglio&quot; where you can enjoy the main night life in Barcelona. </p> </div> <div class="flex items-center justify-between p-4"> <div class="flex items-center"> <img alt="Tania Andrew" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80" class="relative inline-block h-8 w-8 rounded-full" /> <div class="flex flex-col ml-3 text-sm"> <span class="text-slate-800 font-semibold">Lewis Daniel</span> <span class="text-slate-600"> January 10, 2024 </span> </div> </div> </div> </div> </a></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Background Blog Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">This card example works perfectly for showcasing featured articles, editor's picks, or in-depth stories. It comes with a prominent title and background image. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 grid h-[35rem] max-w-lg flex-col items-end justify-center overflow-hidden rounded-lg bg-white"><div class="absolute inset-0 m-0 h-full w-full overflow-hidden rounded-none bg-transparent bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-center"><div class="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50"></div></div><div class="relative text-center p-6 px-6 py-14 md:px-12"><h2 class="mb-6 text-3xl font-medium text-white">How we design and code open-source projects?</h2><h5 class="mb-4 text-xl font-semibold text-slate-300">Lewis Daniel</h5><img alt="Lewis Daniel" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" class="relative inline-block h-32 w-32 rounded-full border border-white"/></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 grid h-[35rem] max-w-lg flex-col items-end justify-center overflow-hidden rounded-lg bg-white"> <div class="absolute inset-0 m-0 h-full w-full overflow-hidden rounded-none bg-transparent bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')] bg-cover bg-center"> <div class="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50"></div> </div> <div class="relative text-center p-6 px-6 py-14 md:px-12"> <h2 class="mb-6 text-3xl font-medium text-white"> How we design and code open-source projects? </h2> <h5 class="mb-4 text-xl font-semibold text-slate-300"> Lewis Daniel </h5> <img alt="Lewis Daniel" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80" class="relative inline-block h-32 w-32 rounded-full border border-white" /> </div> </div></code></pre></div></div></div> text-inherit !mb-4 !font-normal !text-gray-600">The use of a gradient overlay (from black at the bottom to transparent at the top) ensures that the text remains legible while enhancing the image's visual impact. font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Booking Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this card example if you want to showcase properties or accommodations, such as vacation rentals, hotels, or real estate listings. It is great for real estate websites or apps. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"><img src="https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="card-image"/></div><div class="p-4"><div class="flex items-center mb-2"><h6 class="text-slate-800 text-xl font-semibold">Wooden House, Florida</h6><div class="flex items-center gap-0 5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path></svg>5.0</div></div>Enter a freshly updated and thoughtfully furnished peaceful home surrounded by ancient trees, stone walls, and open meadows.</div><div class="group my-3 inline-flex flex-wrap justify-center items-center gap-2"><button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"><path d="M12 7.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"></path><path fill-rule="evenodd" d="M1.5 4.875C1.5 3.839 2.34 3 3.375 3h17.25c1.035 0 1.875.84 1.875 1.875v9.75c0 1.036-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 14.625v-9.75ZM8.25 9.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM18.75 9a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75V9.75a.75.75 0 0 0-.75-.75h-.008ZM4.5 9.75A.75.75 0 0 1 5.25 9h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75V9.75Z" clip-rule="evenodd"></path><path d="M2.25 18a.75.75 0 0 0 0 1.5c5.4 0 10.63.722 15.6 2.075 1.19.324 2.4-.558 2.4-1.82V18.75a.75.75 0 0 0-.75-.75H2.25Z"></path></svg></button><button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"><path fill-rule="evenodd" d="M1.371 8.143c5.858-5.857 15.356-5.857 21.213 0a.75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.06 0c-4.98-4.979-13.053-4.979-18.032 0a.75.75 0 0 1-1.06 0l-.53-.53a.75.75 0 0 1 0-1.06Zm3.182 3.182c4.1-4.1 10.749-4.1 14.85 0a.75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.062 0 8.25 8.25 0 0 0-11.667 0 .75.75 0 0 1-1.06 0l-.53-.53a.75.75 0 0 1 0-1.06Zm3.204 3.182a6 6 0 0 1 8.486 0 .75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.061 0 3.75 3.75 0 0 0-5.304 0 .75.75 0 0 1-1.06 0l-.53-.53a.75.75 0 0 1 0-1.06Zm3.182 3.182a1.5 1.5 0 0 1 2.122 0 .75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.061 0l-.53-.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button><button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"><path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z"></path><path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z"></path></svg></button><button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"><path d="M19.5 6h-15v9h15V6Z"></path><path fill-rule="evenodd" d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v11.25C1.5 17.16 2.34 18 3.375 18H9.75v1.5H6A.75.75 0 0 0 6 21h12a.75.75 0 0 0 0-1.5h-3.75V18h6.375c1.035 0 1.875-.84 1.875-1.875V4.875C22.5 3.839 21.66 3 20.625 3H3.375Zm0 13.5h17.25a.375.375 0 0 0 .375-.375V4.875a.375.375 0 0 0-.375-.375H3.375A.375.375 0 0 0 3 4.875v11.25c0 .207.168.375.375.375Z" clip-rule="evenodd"></path></svg></button><button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"><path fill-rule="evenodd" d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z" clip-rule="evenodd"></path></svg></button><button class="rounded-full 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">+ 20</button></div><div class="px-4 pb-4 pt-0 mt-2"><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">Reserve</button></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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"> <img src="https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1470&amp;q=80" alt="card-image" /> </div> <div class="p-4"> <div class="flex items-center mb-2"> <h6 class="text-slate-800 text-xl font-semibold"> Wooden House, Florida </h6> <div class="flex items-center gap-0 5 ml-auto"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"> <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> </svg> <span class="text-slate-600 ml-1.5">5.0</span> </div> </div> <p class="text-slate-600 leading-normal font-light"> Enter a freshly updated and thoughtfully furnished peaceful home surrounded by ancient trees, stone walls, and open meadows. </p> </div> <div class="group my-3 inline-flex flex-wrap justify-center items-center gap-2"> <button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"> <path d="M12 7.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" /> <path fill-rule="evenodd" d="M1.5 4.875C1.5 3.839 2.34 3 3.375 3h17.25c1.035 0 1.875.84 1.875 1.875v9.75c0 1.036-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 14.625v-9.75ZM8.25 9.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM18.75 9a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75V9.75a.75.75 0 0 0-.75-.75h-.008ZM4.5 9.75A.75.75 0 0 1 5.25 9h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75V9.75Z" clip-rule="evenodd" /> <path d="M2.25 18a.75.75 0 0 0 0 1.5c5.4 0 10.63.722 15.6 2.075 1.19.324 2.4-.558 2.4-1.82V18.75a.75.75 0 0 0-.75-.75H2.25Z" /> </svg> </button> <button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"> <path fill-rule="evenodd" d="M1.371 8.143c5.858-5.857 15.356-5.857 21.213 0a.75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.06 0c-4.98-4.979-13.053-4.979-18.032 0a.75.75 0 0 1-1.06 0l-.53-.53a.75.75 0 0 1 0-1.06Zm3.182 3.182c4.1-4.1 10.749-4.1 14.85 0a.75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.062 0 8.25 8.25 0 0 0-11.667 0 .75.75 0 0 1-1.06 0l-.53-.53a.75.75 0 0 1 0-1.06Zm3.204 3.182a6 6 0 0 1 8.486 0 .75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.061 0 3.75 3.75 0 0 0-5.304 0 .75.75 0 0 1-1.06 0l-.53-.53a.75.75 0 0 1 0-1.06Zm3.182 3.182a1.5 1.5 0 0 1 2.122 0 .75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.061 0l-.53-.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> </svg> </button> <button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"> <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" /> <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" /> </svg> </button> <button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"> <path d="M19.5 6h-15v9h15V6Z" /> <path fill-rule="evenodd" d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v11.25C1.5 17.16 2.34 18 3.375 18H9.75v1.5H6A.75.75 0 0 0 6 21h12a.75.75 0 0 0 0-1.5h-3.75V18h6.375c1.035 0 1.875-.84 1.875-1.875V4.875C22.5 3.839 21.66 3 20.625 3H3.375Zm0 13.5h17.25a.375.375 0 0 0 .375-.375V4.875a.375.375 0 0 0-.375-.375H3.375A.375.375 0 0 0 3 4.875v11.25c0 .207.168.375.375.375Z" clip-rule="evenodd" /> </svg> </button> <button class="rounded-full pointer-events-none border border-slate-300 p-2.5 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" class="w-4 h-4"> <path fill-rule="evenodd" d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z" clip-rule="evenodd" /> </svg> </button> <button class="rounded-full 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"> + 20 </button> </div> <div class="px-4 pb-4 pt-0 mt-2"> <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"> Reserve </button> </div> </div> </code></pre></div></div></div> text-inherit !mb-4 !font-normal !text-gray-600">The header section comes with a captivating image of the property, set within a rounded-xl container that adds to the card's modern appearance. The image is overlaid with a subtle gradient to ensure text legibility. font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Testimonial Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this example if you want to display client testimonials or customer feedback on a company's products or services. rounded-xl border border-blue-gray-50 bg-white mt-4"><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="flex w-full p-4 max-w-lg flex-col rounded-lg bg-white shadow-sm border border-slate-200 my-6"><div class="flex items-center gap-4 text-slate-800"><img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" alt="Tania Andrew" class="relative inline-block h-[58px] w-[58px] !rounded-full object-cover object-center"/><div class="flex w-full flex-col"><div class="flex items-center justify-between"><h5 class="text-xl font-semibold text-slate-800">Tania Andrew</h5><div class="flex items-center gap-0 5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path></svg></div></div>Designer @ Google</div></div><div class="mt-6">"I found solution to all my design needs from Creative Tim. I use them as a freelancer in my hobby projects for fun! And its really affordable, very humble guys !!!"</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="flex w-full p-4 max-w-lg flex-col rounded-lg bg-white shadow-sm border border-slate-200 my-6"> <div class="flex items-center gap-4 text-slate-800"> <img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80" alt="Tania Andrew" class="relative inline-block h-[58px] w-[58px] !rounded-full object-cover object-center" /> <div class="flex w-full flex-col"> <div class="flex items-center justify-between"> <h5 class="text-xl font-semibold text-slate-800"> Tania Andrew </h5> <div class="flex items-center gap-0 5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"> <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"> <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"> <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"> <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-yellow-600"> <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> </svg> </div> </div> <p class="text-xs uppercase font-bold text-slate-500 mt-0.5"> Designer @ Google </p> </div> </div> <div class="mt-6"> <p class="text-base text-slate-600 font-light leading-normal"> &quot;I found solution to all my design needs from Creative Tim. I use them as a freelancer in my hobby projects for fun! And its really affordable, very humble guys !!!&quot; </p> </div> </div> </code></pre></div></div></div> text-inherit !mb-4 !font-normal !text-gray-600">The overall design of the card, with its minimalistic approach and focus on readability (using contrasting text colors and a clear font), ensures that the testimonial message is easily accessible to website visitors. font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Horizontal Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">This example contains a modern, wide-format card UI component designed for featuring news articles, blog posts, or announcements. It comes with a left-aligned image (covering approximately 40% of the card's width), a content section, a headline, a brief description, and a "Learn More" button. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col md:flex-row w-full my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="relative p-2.5 md:w-2/5 shrink-0 overflow-hidden"><img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80" alt="card-image" class="h-full w-full rounded-md md:rounded-lg object-cover"/></div><div class="p-6"><div class="mb-4 rounded-full bg-teal-600 py-0.5 px-2.5 border border-transparent text-xs text-white transition-all shadow-sm w-20 text-center">STARTUP</div><h4 class="mb-2 text-slate-800 text-xl font-semibold">Lyft launching cross-platform service this week</h4>Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses. Yet its own business model disruption is only part of the story<div><a href="#" class="text-slate-800 font-semibold text-sm hover:underline flex items-center">Learn More<svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg></a></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 flex-col md:flex-row w-full my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="relative p-2.5 md:w-2/5 shrink-0 overflow-hidden"> <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1471&amp;q=80" alt="card-image" class="h-full w-full rounded-md md:rounded-lg object-cover" /> </div> <div class="p-6"> <div class="mb-4 rounded-full bg-teal-600 py-0.5 px-2.5 border border-transparent text-xs text-white transition-all shadow-sm w-20 text-center">STARTUP</div> <h4 class="mb-2 text-slate-800 text-xl font-semibold"> Lyft launching cross-platform service this week </h4> <p class="mb-8 text-slate-600 leading-normal font-light"> Like so many organizations these days, Autodesk is a company in transition. It was until recently a traditional boxed software company selling licenses. Yet its own business model disruption is only part of the story </p> <div> <a href="#" class="text-slate-800 font-semibold text-sm hover:underline flex items-center"> Learn More <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> </a> </div> </div> </div> </code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Tailwind CSS Ecommerce Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this card for e-commerce platforms, online stores, or product showcase pages. It offers the users a quick overview of the item, its price, and a straightforward option to add it to their shopping cart. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="relative p-2.5 h-96 overflow-hidden rounded-xl bg-clip-border"><img src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80" alt="card-image" class="h-full w-full object-cover rounded-md"/></div><div class="p-4"><div class="mb-2 flex items-center justify-between">Apple AirPods$95.00</div>With plenty of talk and listen time, voice-activated Siri access, and an available wireless charging case.<button class="rounded-md w-full mt-6 bg-cyan-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-cyan-700 focus:shadow-none active:bg-cyan-700 hover:bg-cyan-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">Add to Cart</button></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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="relative p-2.5 h-96 overflow-hidden rounded-xl bg-clip-border"> <img src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=927&amp;q=80" alt="card-image" class="h-full w-full object-cover rounded-md" /> </div> <div class="p-4"> <div class="mb-2 flex items-center justify-between"> <p class="text-slate-800 text-xl font-semibold"> Apple AirPods </p> <p class="text-cyan-600 text-xl font-semibold"> $95.00 </p> </div> <p class="text-slate-600 leading-normal font-light"> With plenty of talk and listen time, voice-activated Siri access, and an available wireless charging case. </p> <button class="rounded-md w-full mt-6 bg-cyan-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-cyan-700 focus:shadow-none active:bg-cyan-700 hover:bg-cyan-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button"> Add to Cart </button> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with List</h2> rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="p-4"><div class="mb-4 flex items-center justify-between"><h5 class="text-slate-800 text-lg font-semibold">Latest Customers</h5><a href="#" class="text-slate-600">View all</a></div><div class="divide-y divide-slate-200"><div class="flex items-center justify-between pb-3 pt-3 last:pb-0"><div class="flex items-center gap-x-3"><img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg" alt="Maria Jimenez" class="relative inline-block h-8 w-8 rounded-full object-cover object-center"/><div><h6 class="text-slate-800 font-semibold">Maria Jimenez</h6><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b262a39222a0b2c262a222765282426">[email protected]</a></div></div><h6 class="text-slate-600 font-medium">$400</h6></div><div class="flex items-center justify-between pb-3 pt-3 last:pb-0"><div class="flex items-center gap-x-3"><img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-6.jpg" alt="John Micheal" class="relative inline-block h-8 w-8 rounded-full object-cover object-center"/><div><h6 class="text-slate-800 font-semibold">John Micheal</h6><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa90959294ba9d979b9396d4999597">[email protected]</a></div></div><h6 class="text-slate-600 font-medium">$420</h6></div><div class="flex items-center justify-between pb-3 pt-3 last:pb-0"><div class="flex items-center gap-x-3"><img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg" alt="Alexa Liras" class="relative inline-block h-8 w-8 rounded-full object-cover object-center"/><div><h6 class="text-slate-800 font-semibold">Alexa Liras</h6><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b9b4bda0b998bfb5b9b1b4f6bbb7b5">[email protected]</a></div></div><h6 class="text-slate-600 font-medium">$340</h6></div><div class="flex items-center justify-between pb-3 pt-3 last:pb-0"><div class="flex items-center gap-x-3"><img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg" alt="Richard Gran" class="relative inline-block h-8 w-8 rounded-full object-cover object-center"/><div><h6 class="text-slate-800 font-semibold">Richard Gran</h6><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="700219131811021430171d11191c5e131f1d">[email protected]</a></div></div><h6 class="text-slate-600 font-medium">$520</h6></div><div class="flex items-center justify-between pb-3 pt-3 last:pb-0"><div class="flex items-center gap-x-3"><img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg" alt="Micheal Levi" class="relative inline-block h-8 w-8 rounded-full object-cover object-center"/><div><h6 class="text-slate-800 font-semibold">Micheal Levi</h6><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80ede9e3e8e1e5ecc0e7ede1e9ecaee3efed">[email protected]</a></div></div><h6 class="text-slate-600 font-medium">$520</h6></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="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="p-4"> <div class="mb-4 flex items-center justify-between"> <h5 class="text-slate-800 text-lg font-semibold"> Latest Customers </h5> <a href="#" class="text-slate-600" > View all </a> </div> <div class="divide-y divide-slate-200"> <div class="flex items-center justify-between pb-3 pt-3 last:pb-0"> <div class="flex items-center gap-x-3"> <img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg" alt="Maria Jimenez" class="relative inline-block h-8 w-8 rounded-full object-cover object-center" /> <div> <h6 class="text-slate-800 font-semibold"> Maria Jimenez </h6> <p class="text-slate-600 text-sm"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e9e5f6ede5c4e3e9e5ede8aae7ebe9">[email protected]</a> </p> </div> </div> <h6 class="text-slate-600 font-medium"> $400 </h6> </div> <div class="flex items-center justify-between pb-3 pt-3 last:pb-0"> <div class="flex items-center gap-x-3"> <img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-6.jpg" alt="John Micheal" class="relative inline-block h-8 w-8 rounded-full object-cover object-center" /> <div> <h6 class="text-slate-800 font-semibold"> John Micheal </h6> <p class="text-slate-600 text-sm"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02686d6a6c42656f636b6e2c616d6f">[email protected]</a> </p> </div> </div> <h6 class="text-slate-600 font-medium"> $420 </h6> </div> <div class="flex items-center justify-between pb-3 pt-3 last:pb-0"> <div class="flex items-center gap-x-3"> <img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg" alt="Alexa Liras" class="relative inline-block h-8 w-8 rounded-full object-cover object-center" /> <div> <h6 class="text-slate-800 font-semibold"> Alexa Liras </h6> <p class="text-slate-600 text-sm"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f4f9f0edf4d5f2f8f4fcf9bbf6faf8">[email protected]</a> </p> </div> </div> <h6 class="text-slate-600 font-medium"> $340 </h6> </div> <div class="flex items-center justify-between pb-3 pt-3 last:pb-0"> <div class="flex items-center gap-x-3"> <img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg" alt="Richard Gran" class="relative inline-block h-8 w-8 rounded-full object-cover object-center" /> <div> <h6 class="text-slate-800 font-semibold"> Richard Gran </h6> <p class="text-slate-600 text-sm"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47352e242f26352307202a262e2b6924282a">[email protected]</a> </p> </div> </div> <h6 class="text-slate-600 font-medium"> $520 </h6> </div> <div class="flex items-center justify-between pb-3 pt-3 last:pb-0"> <div class="flex items-center gap-x-3"> <img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg" alt="Micheal Levi" class="relative inline-block h-8 w-8 rounded-full object-cover object-center" /> <div> <h6 class="text-slate-800 font-semibold"> Micheal Levi </h6> <p class="text-slate-600 text-sm"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afc2c6ccc7cecac3efc8c2cec6c381ccc0c2">[email protected]</a> </p> </div> </div> <h6 class="text-slate-600 font-medium"> $520 </h6> </div> </div> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Text Only Card</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this card example with clean design for place where only a basic text, like description or title and description are needed. It features a light typography and comfortable spacing. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="p-4"><h5 class="mb-2 text-slate-800 text-xl font-semibold">Website Review Check Text</h5>The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.</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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="p-4"> <h5 class="mb-2 text-slate-800 text-xl font-semibold"> Website Review Check Text </h5> <p class="text-slate-600 leading-normal font-light"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona. </p> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Tabs</h2> text-inherit !mb-4 !font-normal !text-gray-600">This card example features multiple tabs with content; this allows users to switch between related information in text-inherit !mb-4 !font-normal !text-gray-600">Important: This example requires the <a class="text-blue-500" href="/docs/html/tabs#required-script" target="_blank">Tabs Javascript</a> to be included in the project. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-2"><div class="w-full"><ul class="relative flex flex-wrap px-1.5 py-1.5 list-none rounded-md bg-slate-100" data-tabs="tabs" role="list"><li class="z-30 flex-auto text-center"><a class="flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-md cursor-pointer text-slate-600 bg-inherit" data-tab-target="" role="tab" aria-selected="true" aria-controls="dashboard">Dashboard</a></li><li class="z-30 flex-auto text-center"><a class="flex items-center justify-center w-full px-0 py-2 mb-0 text-sm transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-600 bg-inherit" data-tab-target="" role="tab" aria-selected="false" aria-controls="profile">Profile</a></li><li class="z-30 flex-auto text-center"><a class="flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit" data-tab-target="" role="tab" aria-selected="false" aria-controls="settings">Settings</a></li></ul><div data-tab-content="" class="p-3"><div id="dashboard" role="tabpanel"><h5 class="mb-2 text-slate-800 text-xl font-semibold">Website Review Check Text</h5>Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.</div><div class="hidden opacity-0" id="profile" role="tabpanel"><h5 class="mb-2 text-slate-800 text-xl font-semibold">The place is close to Barceloneta</h5>The reading of all good books is like a conversation with the finest minds of past centuries. Follow my dreams and inspire other people.</div><div class="hidden opacity-0" id="settings" role="tabpanel"><h5 class="mb-2 text-slate-800 text-xl font-semibold">Close to Barceloneta</h5>Comparing yourself to others is the thief of joy. The reading of all good books is like a conversation</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="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-2"> <div class="w-full"> <ul class="relative flex flex-wrap px-1.5 py-1.5 list-none rounded-md bg-slate-100" data-tabs="tabs" role="list"> <li class="z-30 flex-auto text-center"> <a class="flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-md cursor-pointer text-slate-600 bg-inherit" data-tab-target="" role="tab" aria-selected="true" aria-controls="dashboard"> Dashboard </a> </li> <li class="z-30 flex-auto text-center"> <a class="flex items-center justify-center w-full px-0 py-2 mb-0 text-sm transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-600 bg-inherit" data-tab-target="" role="tab" aria-selected="false" aria-controls="profile"> Profile </a> </li> <li class="z-30 flex-auto text-center"> <a class="flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit" data-tab-target="" role="tab" aria-selected="false" aria-controls="settings"> Settings </a> </li> </ul> <div data-tab-content="" class="p-3"> <div id="dashboard" role="tabpanel"> <h5 class="mb-2 text-slate-800 text-xl font-semibold"> Website Review Check Text </h5> <p class="text-slate-600 leading-normal font-light"> Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire other people to follow their dreams, too. </p> </div> <div class="hidden opacity-0" id="profile" role="tabpanel"> <h5 class="mb-2 text-slate-800 text-xl font-semibold"> The place is close to Barceloneta </h5> <p class="text-slate-600 leading-normal font-light"> The reading of all good books is like a conversation with the finest minds of past centuries. Follow my dreams and inspire other people. </p> </div> <div class="hidden opacity-0" id="settings" role="tabpanel"> <h5 class="mb-2 text-slate-800 text-xl font-semibold"> Close to Barceloneta </h5> <p class="text-slate-600 leading-normal font-light"> Comparing yourself to others is the thief of joy. The reading of all good books is like a conversation </p> </div> </div> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Bottom Image</h2> text-inherit !mb-4 !font-normal !text-gray-600">This card component contains the title, text, and an image at the bottom. It is a good example for displaying news, articles, or blog posts where you want the title to be the most important thing on the card. 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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"><div class="p-4"><h6 class="mb-2 text-slate-800 text-xl font-semibold">Special News Article</h6>The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.</div><div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"><img src="https://images.unsplash.com/photo-1725610588086-b9e38da987f7?q=80&w=1200" alt="card-image"/></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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> <div class="p-4"> <h6 class="mb-2 text-slate-800 text-xl font-semibold"> Special News Article </h6> <p class="text-slate-600 leading-normal font-light"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to &quot;Naviglio&quot; where you can enjoy the main night life in Barcelona. </p> </div> <div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"> <img src="https://images.unsplash.com/photo-1725610588086-b9e38da987f7?q=80&w=1200" alt="card-image" /> </div> </div> </code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Animation</h2> text-inherit !mb-4 !font-normal !text-gray-600">On this example we added a hover effect to the card. When you hover over the card, the image will zoom using cubic bezier animation and also the card shadow will change. 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="cursor-pointer group relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 hover:shadow-lg transition-shadow duration-300"><div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"><img class="transition-transform duration-500 ease-[cubic-bezier(0.25, 1, 0.5, 1)] transform group-hover:scale-110" src="https://images.unsplash.com/photo-1496436818536-e239445d3327?q=80&w=1200" alt="investment-seed-round"/></div><div class="p-4"><h6 class="mb-2 text-slate-800 text-xl font-semibold">Successful Seed Round</h6>We are thrilled to announce the completion of our seed round, securing $2M in investment to fuel product development and market expansion.</div><div class="px-4 pb-4 pt-0 mt-2"><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">Read article</button></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="cursor-pointer group relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 hover:shadow-lg transition-shadow duration-300"> <div class="relative h-56 m-2.5 overflow-hidden text-white rounded-md"> <img class="transition-transform duration-500 ease-[cubic-bezier(0.25, 1, 0.5, 1)] transform group-hover:scale-110" src="https://images.unsplash.com/photo-1496436818536-e239445d3327?q=80&w=1200" alt="investment-seed-round" /> </div> <div class="p-4"> <h6 class="mb-2 text-slate-800 text-xl font-semibold"> Successful Seed Round </h6> <p class="text-slate-600 leading-normal font-light"> We are thrilled to announce the completion of our seed round, securing $2M in investment to fuel product development and market expansion. </p> </div> <div class="px-4 pb-4 pt-0 mt-2"> <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"> Read article </button> </div> </div> </code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Alert</h2> text-inherit !mb-4 !font-normal !text-gray-600">Card with alert is a card that contains a message that is displayed at the top of the card. It is useful for displaying important information that the user needs to know. 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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-2"><div class="relative flex w-full p-3 pr-12 text-sm text-white bg-red-500 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5"></path></svg>Please update your card details.<button class="flex items-center justify-center transition-all w-8 h-8 rounded-md text-white hover:bg-white/10 active:bg-white/10 absolute top-1.5 right-1.5" type="button"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="p-3"><div class="flex items-center mb-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-slate-600"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"></path></svg><h5 class="ml-2 text-slate-800 text-xl font-semibold">Custom CMS for startup</h5></div>Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others.<div><a href="#" class="text-slate-800 font-semibold text-sm hover:underline flex items-center">Learn More<svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg></a></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 flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-2"> <div class="relative flex w-full p-3 pr-12 text-sm text-white bg-red-500 rounded-md"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" /> </svg> Please update your card details. <button class="flex items-center justify-center transition-all w-8 h-8 rounded-md text-white hover:bg-white/10 active:bg-white/10 absolute top-1.5 right-1.5" type="button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <div class="p-3"> <div class="flex items-center mb-2"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-slate-600"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" /> </svg> <h5 class="ml-2 text-slate-800 text-xl font-semibold"> Custom CMS for startup </h5> </div> <p class="block text-slate-600 leading-normal font-light mb-4"> Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others. </p> <div> <a href="#" class="text-slate-800 font-semibold text-sm hover:underline flex items-center"> Learn More <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> </a> </div> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Centered Content</h2> text-inherit !mb-4 !font-normal !text-gray-600">Card with centered content is a card that contains all the details encapsulated in the middle of the card. user needs to know. The card is taking more space than the other cards. 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 min-h-80 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-2"><div class="p-3 text-center"><div class="flex justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-purple-400"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"></path></svg></div><div class="flex justify-center mb-2"><h5 class="text-slate-800 text-2xl font-semibold">Lit Ideas for Startups</h5></div>Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others.<div class="text-center"><button class="min-w-32 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" type="button">View 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"><div class="relative min-h-80 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-2"> <div class="p-3 text-center"> <div class="flex justify-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-purple-400"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" /> </svg> </div> <div class="flex justify-center mb-2"> <h5 class="text-slate-800 text-2xl font-semibold"> Lit Ideas for Startups </h5> </div> <p class="block text-slate-600 leading-normal font-light mb-4 max-w-lg"> Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others. </p> <div class="text-center"> <button class="min-w-32 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" type="button"> View More </button> </div> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Placeholder (Empty State)</h2> text-inherit !mb-4 !font-normal !text-gray-600">This simple tailwind css component is a card that contains an Icon and Text for the empty state. to display. 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 min-h-60 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-2"><div class="p-3 text-center"><div class="flex justify-center mb-4"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-slate-400 w-10 h-10"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"></path></svg></div><div class="flex justify-center mb-2"><h5 class="text-slate-800 text-2xl font-semibold">No data sources linked.</h5></div>No APIs created yet. Contact us for more details.</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 min-h-60 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-2"> <div class="p-3 text-center"> <div class="flex justify-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-slate-400 w-10 h-10"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /> </svg> </div> <div class="flex justify-center mb-2"> <h5 class="text-slate-800 text-2xl font-semibold"> No data sources linked. </h5> </div> <p class="block text-slate-600 leading-normal font-light mb-4 max-w-lg"> No APIs created yet. Contact us for more details. </p> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Scroll Area</h2> text-inherit !mb-4 !font-normal !text-gray-600">This example shows a simple tailwind css card that contains a scrollable area under the title. more content to display. 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 w-96 bg-white shadow-sm border border-slate-200 rounded-lg p-3 pb-6"><div class="flex justify-center mb-4 mt-5"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-purple-500"><path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"></path></svg></div><div class="flex justify-center mb-3"><h5 class="text-slate-800 text-2xl font-semibold">Scrollable Content</h5></div><div class="p-3 mt-5 border-t border-slate-100 text-center max-h-60 overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-xl [&::-webkit-scrollbar-thumb]:bg-slate-300 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:rounded-xl [&::-webkit-scrollbar-track]:bg-slate-100">Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others. Here is some additional text to test the scrolling feature. Imagine this is a long article that you can scroll through. Still more content to keep the scroll active. Let's make sure the scrollbar styling is correct. Apple's scrollbar style is subtle, with a thin, sleek design. Scroll down for more! Keep adding more content to ensure the scroll is working. The card's content should now be scrollable. Test it out! More text to fill the space, as we continue to check how scroll behaves.</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 w-96 bg-white shadow-sm border border-slate-200 rounded-lg p-3 pb-6"> <div class="flex justify-center mb-4 mt-5"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-purple-500"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" /> </svg> </div> <div class="flex justify-center mb-3"> <h5 class="text-slate-800 text-2xl font-semibold"> Scrollable Content </h5> </div> <div class="p-3 mt-5 border-t border-slate-100 text-center max-h-60 overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-xl [&::-webkit-scrollbar-thumb]:bg-slate-300 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:rounded-xl [&::-webkit-scrollbar-track]:bg-slate-100"> <p class="block text-slate-600 leading-normal font-light mb-4 max-w-lg"> Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others. Here is some additional text to test the scrolling feature. Imagine this is a long article that you can scroll through. </p> <br /> <p class="block text-slate-600 leading-normal font-light mb-4 max-w-lg"> Still more content to keep the scroll active. Let's make sure the scrollbar styling is correct. Apple's scrollbar style is subtle, with a thin, sleek design. Scroll down for more! Keep adding more content to ensure the scroll is working. The card's content should now be scrollable. Test it out! More text to fill the space, as we continue to check how scroll behaves. </p> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Card with Hover Effect</h2> text-inherit !mb-4 !font-normal !text-gray-600">Use this card example with simple design and a beautiful hover effect for places where you want the attention of the user to be focused. It is great in combination with an <code>a tag</code> for linking to other pages, categories or blog posts. rounded-xl border border-blue-gray-50 bg-white mt-4"><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 flex-col my-6 bg-white shadow-sm border border-slate-200 hover:border-slate-300 hover:shadow-md rounded-lg transition-all cursor-pointer w-96"><div class="p-4"><h5 class="mb-2 text-slate-800 text-xl font-semibold">Website Review Check Text</h5>The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.</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 flex-col my-6 bg-white shadow-sm border border-slate-200 hover:border-slate-300 hover:shadow-md rounded-lg transition-all cursor-pointer w-96"> <div class="p-4"> <h5 class="mb-2 text-slate-800 text-xl font-semibold"> Website Review Check Text </h5> <p class="text-slate-600 leading-normal font-light"> The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona. </p> </div> </div></code></pre></div></div></div> font-semibold leading-snug !mb-2 text-primary">Explore More Tailwind CSS Examples</h2> text-inherit !mb-4 !font-normal !text-gray-600">Check out more card component examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>: text-inherit !mb-4 !font-normal !text-gray-600">• <a href="https://www.material-tailwind.com/blocks/cards" target="_blank">Cards</a> target="_blank">Web 3.0 Cards</a> target="_blank">KPI Cards</a> target="_blank">Pricing Sections</a> font-semibold leading-snug !mb-2 text-primary">Card Component Best Practices for Developers:</h3> text-inherit !mb-4 !font-normal !text-gray-600">• Maintain a consistent design across all cards. This includes using uniform sizes, typography, colors, and spacing to create a cohesive user experience. content. information. actions. Stick to the essentials to prevent cognitive overload. the application. text-inherit !mb-4 !font-normal !text-gray-600">Check out more card <a href="https://www.material-tailwind.com/roots-of-ui-ux-design" target="_blank"> UI best practices</a> if you want to create intuitive user interfaces.</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="#card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card</a></li><li><a href="#simple-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">simple card</a></li><li><a href="#card-with-link" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with link</a></li><li><a href="#card-with-header" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with header</a></li><li><a href="#card-with-footer" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with footer</a></li><li><a href="#card-with-header-&-footer" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with header & footer</a></li><li><a href="#profile-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">profile card</a></li><li><a href="#login-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">login card</a></li><li><a href="#pricing-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">pricing card</a></li><li><a href="#pricing-card-dark" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">pricing card dark</a></li><li><a href="#blog-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">blog card</a></li><li><a href="#background-blog-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">background blog card</a></li><li><a href="#booking-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">booking card</a></li><li><a href="#testimonial-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">testimonial card</a></li><li><a href="#horizontal-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">horizontal card</a></li><li><a href="#ecommerce-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">ecommerce card</a></li><li><a href="#card-with-list" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with list</a></li><li><a href="#text-only-card" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">text only card</a></li><li><a href="#card-with-tabs" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with tabs</a></li><li><a href="#card-with-bottom-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">card with bottom image</a></li><li><a href="#card-with-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">card with animation</a></li><li><a href="#card-with-alert" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with alert</a></li><li><a href="#card-with-centered-content" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with centered content</a></li><li><a href="#card-with-placeholder" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with placeholder</a></li><li><a href="#card-with-hover" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with hover</a></li><li><a href="#card-with-scroll-area" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">card with scroll area</a></li><li><a href="#more-examples" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">more examples</a></li><li><a href="#best-practices" class="relative list-item w-full py-1 text-sm capitalize transition-colors hover:text-primary focus:text-primary font-normal text-gray-600">best practices</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/card.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 © 2025 <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 data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><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 Card - Material Tailwind","description":"Use our card examples styled with Tailwind CSS to include detailed information like a photo, text, and a link about a single subject.","navigation":["card","simple-card","card-with-link","card-with-header","card-with-footer","card-with-header-\u0026-footer","profile-card","login-card","pricing-card","pricing-card-dark","blog-card","background-blog-card","booking-card","testimonial-card","horizontal-card","ecommerce-card","card-with-list","text-only-card","card-with-tabs","card-with-bottom-image","card-with-animation","card-with-alert","card-with-centered-content","card-with-placeholder","card-with-hover","card-with-scroll-area","more-examples","best-practices"],"github":"card","prev":"button-group","next":"checkbox"},"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 h3: \"h3\",\n h2: \"h2\",\n div: \"div\",\n pre: \"pre\",\n code: \"code\",\n span: \"span\",\n hr: \"hr\"\n }, _provideComponents(), props.components), {CodePreview, HTMLCardExamples} = _components;\n if (!CodePreview) _missingMdxReference(\"CodePreview\", true);\n if (!HTMLCardExamples) _missingMdxReference(\"HTMLCardExamples\", false);\n if (!HTMLCardExamples.BackgroundBlogCard) _missingMdxReference(\"HTMLCardExamples.BackgroundBlogCard\", true);\n if (!HTMLCardExamples.BlogCard) _missingMdxReference(\"HTMLCardExamples.BlogCard\", true);\n if (!HTMLCardExamples.BookingCard) _missingMdxReference(\"HTMLCardExamples.BookingCard\", true);\n if (!HTMLCardExamples.CardDefault) _missingMdxReference(\"HTMLCardExamples.CardDefault\", true);\n if (!HTMLCardExamples.CardWithAlert) _missingMdxReference(\"HTMLCardExamples.CardWithAlert\", true);\n if (!HTMLCardExamples.CardWithAnimation) _missingMdxReference(\"HTMLCardExamples.CardWithAnimation\", true);\n if (!HTMLCardExamples.CardWithBottomImage) _missingMdxReference(\"HTMLCardExamples.CardWithBottomImage\", true);\n if (!HTMLCardExamples.CardWithCenteredContent) _missingMdxReference(\"HTMLCardExamples.CardWithCenteredContent\", true);\n if (!HTMLCardExamples.CardWithFooter) _missingMdxReference(\"HTMLCardExamples.CardWithFooter\", true);\n if (!HTMLCardExamples.CardWithHeader) _missingMdxReference(\"HTMLCardExamples.CardWithHeader\", true);\n if (!HTMLCardExamples.CardWithHeaderFooter) _missingMdxReference(\"HTMLCardExamples.CardWithHeaderFooter\", true);\n if (!HTMLCardExamples.CardWithHover) _missingMdxReference(\"HTMLCardExamples.CardWithHover\", true);\n if (!HTMLCardExamples.CardWithLink) _missingMdxReference(\"HTMLCardExamples.CardWithLink\", true);\n if (!HTMLCardExamples.CardWithList) _missingMdxReference(\"HTMLCardExamples.CardWithList\", true);\n if (!HTMLCardExamples.CardWithPlaceholder) _missingMdxReference(\"HTMLCardExamples.CardWithPlaceholder\", true);\n if (!HTMLCardExamples.CardWithScrollArea) _missingMdxReference(\"HTMLCardExamples.CardWithScrollArea\", true);\n if (!HTMLCardExamples.CardWithTabs) _missingMdxReference(\"HTMLCardExamples.CardWithTabs\", true);\n if (!HTMLCardExamples.EcommerceCard) _missingMdxReference(\"HTMLCardExamples.EcommerceCard\", true);\n if (!HTMLCardExamples.HorizontalCard) _missingMdxReference(\"HTMLCardExamples.HorizontalCard\", true);\n if (!HTMLCardExamples.LoginCard) _missingMdxReference(\"HTMLCardExamples.LoginCard\", true);\n if (!HTMLCardExamples.PricingCard) _missingMdxReference(\"HTMLCardExamples.PricingCard\", true);\n if (!HTMLCardExamples.PricingCardDark) _missingMdxReference(\"HTMLCardExamples.PricingCardDark\", true);\n if (!HTMLCardExamples.ProfileCard) _missingMdxReference(\"HTMLCardExamples.ProfileCard\", true);\n if (!HTMLCardExamples.SimpleCard) _missingMdxReference(\"HTMLCardExamples.SimpleCard\", true);\n if (!HTMLCardExamples.TestimonialCard) _missingMdxReference(\"HTMLCardExamples.TestimonialCard\", true);\n if (!HTMLCardExamples.TextOnlyCard) _missingMdxReference(\"HTMLCardExamples.TextOnlyCard\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.h1, {\n children: \"Tailwind CSS Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use our cards to provide a flexible and extensible content container based on Tailwind CSS with multiple variants and options.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"By its definition, a card is a sheet of material that serves as an entry point to more detailed information. Cards usually include a photo, text, and a link about a single subject. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"See below our beautiful Tailwind CSS card examples that you can use in your web and app projects.\"\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.h3, {\n children: \"Card Examples:\"\n }), \"\\n\", _jsx(_components.h2, {\n children: \"Default Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This versatile card component example contains an image, title, text, and button, being suitable for a wide range of web design applications. The utility classes from Tailwind CSS ensure that the card is responsive and can adjust to different screen sizes.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card\",\n link: \"card#card\",\n component: _jsx(HTMLCardExamples.CardDefault, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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 h-56 m-2.5 overflow-hidden text-white rounded-md\\\"\"\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 }), _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-1540553016722-983e48a2cd10?ixlib=rb-1.2.1\"\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=800\"\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 }), _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: \"\\\"card-image\\\"\"\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-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: \"h6\"\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-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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-600 leading-normal 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 place is close to Barceloneta Beach and bus stop just 2 min by walk\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" and near to \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026quot;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"Naviglio\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026quot;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" where you can enjoy the main night life in\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \"\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: \"\\\"px-4 pb-4 pt-0 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: \"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: \" Read 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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Tailwind CSS Simple Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this card example with clean design for article summaries, product/ service highlights, event descriptions, or user testimonials. It features a clear hierarchy of text, comfortable spacing, and a button for action.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"simple-card\",\n link: \"card#simple-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.SimpleCard, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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-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: \"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: \"\\\"mb-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check Update from Our Team in San Francisco\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-600 leading-normal 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 place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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\", _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: \"\\\"rounded-md bg-slate-800 py-2 px-4 mt-6 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: \" Read 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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Tailwind CSS Card with Link\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"The design elements such as the SVG icon, text content, and interactive button, combined with the clean and modern styling provided by Tailwind CSS, make this card example versatile and adaptable to a wide range of uses.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-link\",\n link: \"card#card-with-link\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.CardWithLink, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 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: \"\\\"flex items-center mb-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: \"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: \"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 }), _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: \"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.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: \"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: \"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-6 w-6 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: \" \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: \"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 }), _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 }), _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: \"\\\"M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418\\\"\"\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: \"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: \"\\\"ml-3 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"block text-slate-600 leading-normal font-light mb-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: \" Because it\"\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: \"s about motivating the doers. Because 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 here to follow my dreams and inspire others.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"#\\\"\"\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-semibold text-sm hover:underline flex items-center\\\"\"\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: \"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: \"\\\"ml-2 h-4 w-4\\\"\"\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: \"\\\"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: \"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: \"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: \"\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: \"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 }), _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 }), _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 }), _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: \"\\\"M14 5l7 7m0 0l-7 7m7-7H3\\\"\"\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: \"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: \"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: \"Card with Header\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"You can always add additional information to a regular card. Usually these are secondary details about the main topic of the card.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-header\",\n link: \"card#card-with-header\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.CardWithHeader, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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: \"\\\"mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-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: \"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: \"\\\"text-sm text-slate-600 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: \" Header for the card\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"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: \"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: \"\\\"mb-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check Update from Our Team in San Francisco\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-600 leading-normal 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 place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Card with Footer\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"At the end of the card, add additional information that are as a secondary source of information.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-footer\",\n link: \"card#card-with-footer\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.CardWithFooter, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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-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: \"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: \"\\\"mb-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check Update from Our Team in San Francisco\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-600 leading-normal 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 place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \"\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: \"\\\"mx-3 border-t border-slate-200 pb-3 pt-2 px-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: \"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: \"\\\"text-sm text-slate-600 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: \" Last updated: 4 hours ago\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"Card with Header \u0026 Footer\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This card example features a structured layout with a defined header, body, and footer section, perfect for organizing content clearly. The header usually contains the card title, icons, or action buttons, whereas the footer can include call-to-action buttons, additional links, or additional information.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-header-\u0026-footer\",\n link: \"card#card-with-header-\u0026-footer\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.CardWithHeaderFooter, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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: \"\\\"mx-3 mb-0 border-b border-slate-200 pt-3 pb-2 px-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: \"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: \"\\\"text-sm font-medium 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: \" Header for the card\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"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: \"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: \"\\\"mb-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check Update from Our Team in San Francisco\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-600 leading-normal 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 place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \"\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: \"\\\"mx-3 border-t border-slate-200 pb-3 pt-2 px-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: \"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: \"\\\"text-sm text-slate-600 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: \" Last updated: 4 hours ago\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"Tailwind CSS Profile Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This card example is ideal for introducing individuals, such as team members, employees, or speakers at an event, on a company website, event page, or within an app.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"profile-card\",\n link: \"card#profile-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.ProfileCard, {}),\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: \"\\\"flex flex-col bg-white shadow-sm border border-slate-200 rounded-lg my-6 w-96\\\"\"\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: \"\\\"m-2.5 overflow-hidden rounded-md h-80 flex justify-center items-center\\\"\"\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 }), _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 h-full object-cover\\\"\"\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://docs.material-tailwind.com/img/team-3.jpg\\\"\"\n }), _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: \"\\\"profile-picture\\\"\"\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 text-center\\\"\"\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: \"h4\"\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-1 text-xl font-semibold 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: \" Natalie Paisley\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h4\"\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 })]\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: \"\\\"text-sm font-semibold text-slate-500 uppercase\\\"\"\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: \" Product Manager \"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-base text-slate-600 mt-4 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 place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \"\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 p-6 pt-2 gap-7\\\"\"\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: \"\\\"min-w-32 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: \" Follow\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.p, {\n children: \"The design of this card features rounded-xl corners, shadow for depth, and gradient text for the role description.\"\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Tailwind CSS Login Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this card example for building login pages where users need to enter their credentials (email and password) to access their accounts.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"login-card\",\n link: \"card#login-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.LoginCard, {}),\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: \"\\\"relative flex flex-col bg-white shadow-sm border border-slate-200 w-96 rounded-lg my-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: \"\\\"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: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"for\"\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: \"for\"\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 })\n })\n })\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.p, {\n children: \"This component features:\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"• A header with a gradient background and a \\\"Sign In\\\" title. \", _jsx(\"br\", {}), \"\\n• Input fields for email and password, styled with a modern, floating label animation that improves usability and aesthetics.\", _jsx(\"br\", {}), \"\\n• A \\\"Remember Me\\\" option with a custom-styled checkbox.\", _jsx(\"br\", {}), \"\\n• A prominent sign-in button that matches the header's gradient, making the call to action (CTA) clear.\", _jsx(\"br\", {}), \"\\n• A link for users who don't have an account yet, encouraging new user registration.\"]\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Tailwind CSS Pricing Card Dark\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this dark card example if you want to implement different subscription tiers or plans, highlighting the features, support, and pricing details of each option to help users choose the one that best fits their needs.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"pricing-card-dark\",\n link: \"card#pricing-card-dark\",\n component: _jsx(HTMLCardExamples.PricingCardDark, {}),\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: \"\\\"flex flex-col rounded-lg bg-slate-800 shadow-sm max-w-96 p-8 my-6 border border-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: \" \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: \"\\\"pb-8 m-0 mb-8 text-center text-slate-100 border-b border-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: \" \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 uppercase font-semibold text-slate-300\\\"\"\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: \" standard\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"h1\"\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 gap-1 mt-4 font-bold text-white text-6xl\\\"\"\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: \"\\\"text-3xl\\\"\"\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: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e29\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"\\\"self-end text-3xl\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e/mo\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: \"h1\"\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-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: \"ul\"\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\\\"\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-500 bg-slate-700\\\"\"\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: \"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 }), _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: \"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 }), _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: \"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 text-slate-300\\\"\"\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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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-300\\\"\"\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: \" 5 team members\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-500 bg-slate-700\\\"\"\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: \"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 }), _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: \"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 }), _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: \"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 text-slate-300\\\"\"\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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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-300\\\"\"\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: \" 200+ components\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-500 bg-slate-700\\\"\"\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: \"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 }), _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: \"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 }), _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: \"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 text-slate-300\\\"\"\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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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-300\\\"\"\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: \" 40+ built-in pages\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-500 bg-slate-700\\\"\"\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: \"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 }), _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: \"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 }), _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: \"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 text-slate-300\\\"\"\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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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-300\\\"\"\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: \" 1 year free updates\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-500 bg-slate-700\\\"\"\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: \"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 }), _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: \"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 }), _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: \"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 text-slate-300\\\"\"\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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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-300\\\"\"\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: \" Lifetime technical support\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"ul\"\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-0 mt-12\\\"\"\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: \"\\\"min-w-32 w-full rounded-md bg-white py-2 px-4 border border-transparent text-center text-sm text-slate-600 transition-all shadow-md hover:shadow-lg focus:bg-white/90 focus:shadow-none active:bg-white/90 hover:bg-white/90 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: \" Buy Now\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Tailwind CSS Pricing Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this card example if you want to implement different subscription tiers or plans, highlighting the features, support, and pricing details of each option to help users choose the one that best fits their needs.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"pricing-card\",\n link: \"card#pricing-card\",\n component: _jsx(HTMLCardExamples.PricingCard, {}),\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: \"\\\"flex flex-col rounded-lg bg-white shadow-sm max-w-96 p-8 my-6 border border-slate-200\\\"\"\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: \"\\\"pb-8 m-0 mb-8 text-center text-slate-800 border-b border-slate-200\\\"\"\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 uppercase font-semibold 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: \" standard\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"h1\"\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 gap-1 mt-4 font-bold text-slate-800 text-6xl\\\"\"\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: \"\\\"text-3xl\\\"\"\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: \"span\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e29\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"\\\"self-end text-3xl\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e/mo\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: \"h1\"\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-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: \"ul\"\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\\\"\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-200 bg-slate-50\\\"\"\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 })]\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 }), _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: \"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 }), _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: \"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 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: \" \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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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\\\"\"\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: \" 5 team members\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-200 bg-slate-50\\\"\"\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 })]\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 }), _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: \"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 }), _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: \"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 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: \" \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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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\\\"\"\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: \" 200+ components\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-200 bg-slate-50\\\"\"\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 })]\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 }), _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: \"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 }), _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: \"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 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: \" \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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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\\\"\"\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: \" 40+ built-in pages\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-200 bg-slate-50\\\"\"\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 })]\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 }), _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: \"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 }), _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: \"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 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: \" \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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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\\\"\"\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: \" 1 year free updates\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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-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: \"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: \"\\\"p-1 border rounded-full border-slate-200 bg-slate-50\\\"\"\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 })]\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 }), _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: \"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 }), _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: \"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 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: \" \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: \"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 }), _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 }), _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: \"\\\"M4.5 12.75l6 6 9-13.5\\\"\"\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: \"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\\\"\"\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: \" Life time technical support\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"ul\"\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-0 mt-12\\\"\"\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: \"\\\"min-w-32 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: \" Buy Now\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Tailwind CSS Blog Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This card example is ideal for highlighting recent or featured posts on a blog. It includes an image, a headline, a content summary , and a date stamp to indicate when it was published or last updated.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"blog-card\",\n link: \"card#blog-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.BlogCard, {}),\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: \"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: \"\\\"javascript:void(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: \"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 my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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 h-56 m-2.5 overflow-hidden text-white rounded-md\\\"\"\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 }), _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-1522202176988-66273c2fd55f?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=1471\"\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 }), _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: \"\\\"card-image\\\"\"\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-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-4 rounded-full bg-cyan-600 py-0.5 px-2.5 border border-transparent text-xs text-white transition-all shadow-sm w-20 text-center\\\"\"\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: \"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: \"h6\"\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-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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-600 leading-normal 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 place is close to Barceloneta Beach and bus stop just 2 min by walk\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" and near to \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026quot;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"Naviglio\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026quot;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" where you can enjoy the main night life in\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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\", _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: \"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\\\"\"\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?ixlib=rb-1.2.1\"\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=1480\"\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-8 w-8 rounded-full\\\"\"\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 flex-col ml-3 text-sm\\\"\"\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: \"\\\"text-slate-800 font-semibold\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eLewis Daniel\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: \"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: \"\\\"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: \" January 10, 2024\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"a\"\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: \"Tailwind CSS Background Blog Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This card example works perfectly for showcasing featured articles, editor's picks, or in-depth stories. It comes with a prominent title and background image.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"background-blog-card\",\n link: \"card#background-blog-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.BackgroundBlogCard, {}),\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: \"\\\"relative grid h-[35rem] max-w-lg flex-col items-end justify-center overflow-hidden rounded-lg 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: \"\\\"absolute inset-0 m-0 h-full w-full overflow-hidden rounded-none bg-transparent bg-[url('https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3\u0026ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8\u0026auto=format\u0026fit=crop\u0026w=687\u0026q=80')] bg-cover bg-center\\\"\"\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: \"\\\"to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 via-black/50\\\"\"\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: \"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 text-center p-6 px-6 py-14 md:px-12\\\"\"\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: \"h2\"\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 text-3xl font-medium text-white\\\"\"\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: \" How we design and code open-source projects?\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h2\"\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: \"\\\"mb-4 text-xl font-semibold text-slate-300\\\"\"\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: \" Lewis Daniel\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"Lewis Daniel\\\"\"\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?ixlib=rb-1.2.1\"\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=1480\"\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-32 w-32 rounded-full border border-white\\\"\"\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: \"\u003e\"\n })]\n })]\n })\n })\n })\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.p, {\n children: \"The use of a gradient overlay (from black at the bottom to transparent at the top) ensures that the text remains legible while enhancing the image's visual impact.\"\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Tailwind CSS Booking Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this card example if you want to showcase properties or accommodations, such as vacation rentals, hotels, or real estate listings. It is great for real estate websites or apps.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"booking-card\",\n link: \"card#booking-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.BookingCard, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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 h-56 m-2.5 overflow-hidden text-white rounded-md\\\"\"\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 }), _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-1499696010180-025ef6e1a8f9?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=1470\"\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 }), _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: \"\\\"card-image\\\"\"\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-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 mb-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: \"h6\"\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 text-xl font-semibold\\\"\"\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: \" Wooden House, Florida\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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: \"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-0 5 ml-auto\\\"\"\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 })]\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: \"\\\"w-5 h-5 text-yellow-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: \" \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 })]\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: \"\\\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z\\\"\"\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 }), _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: \" \"\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-600 ml-1.5\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003e5.0\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: \"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: \"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-600 leading-normal 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: \" Enter a freshly updated and thoughtfully furnished peaceful home surrounded by ancient trees, stone walls, and open meadows.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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\", _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: \"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: \"\\\"group my-3 inline-flex flex-wrap justify-center 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-full pointer-events-none border border-slate-300 p-2.5 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 }), _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: \"\\\"M12 7.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z\\\"\"\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: \"\\\"M1.5 4.875C1.5 3.839 2.34 3 3.375 3h17.25c1.035 0 1.875.84 1.875 1.875v9.75c0 1.036-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 14.625v-9.75ZM8.25 9.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM18.75 9a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75V9.75a.75.75 0 0 0-.75-.75h-.008ZM4.5 9.75A.75.75 0 0 1 5.25 9h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75V9.75Z\\\"\"\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\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"\\\"M2.25 18a.75.75 0 0 0 0 1.5c5.4 0 10.63.722 15.6 2.075 1.19.324 2.4-.558 2.4-1.82V18.75a.75.75 0 0 0-.75-.75H2.25Z\\\"\"\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-full pointer-events-none border border-slate-300 p-2.5 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 }), _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: \"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: \"\\\"M1.371 8.143c5.858-5.857 15.356-5.857 21.213 0a.75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.06 0c-4.98-4.979-13.053-4.979-18.032 0a.75.75 0 0 1-1.06 0l-.53-.53a.75.75 0 0 1 0-1.06Zm3.182 3.182c4.1-4.1 10.749-4.1 14.85 0a.75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.062 0 8.25 8.25 0 0 0-11.667 0 .75.75 0 0 1-1.06 0l-.53-.53a.75.75 0 0 1 0-1.06Zm3.204 3.182a6 6 0 0 1 8.486 0 .75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.061 0 3.75 3.75 0 0 0-5.304 0 .75.75 0 0 1-1.06 0l-.53-.53a.75.75 0 0 1 0-1.06Zm3.182 3.182a1.5 1.5 0 0 1 2.122 0 .75.75 0 0 1 0 1.061l-.53.53a.75.75 0 0 1-1.061 0l-.53-.53a.75.75 0 0 1 0-1.06Z\\\"\"\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\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-full pointer-events-none border border-slate-300 p-2.5 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 }), _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.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z\\\"\"\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: \"\\\"m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z\\\"\"\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-full pointer-events-none border border-slate-300 p-2.5 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 }), _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: \"\\\"M19.5 6h-15v9h15V6Z\\\"\"\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: \"\\\"M3.375 3C2.339 3 1.5 3.84 1.5 4.875v11.25C1.5 17.16 2.34 18 3.375 18H9.75v1.5H6A.75.75 0 0 0 6 21h12a.75.75 0 0 0 0-1.5h-3.75V18h6.375c1.035 0 1.875-.84 1.875-1.875V4.875C22.5 3.839 21.66 3 20.625 3H3.375Zm0 13.5h17.25a.375.375 0 0 0 .375-.375V4.875a.375.375 0 0 0-.375-.375H3.375A.375.375 0 0 0 3 4.875v11.25c0 .207.168.375.375.375Z\\\"\"\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\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-full pointer-events-none border border-slate-300 p-2.5 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 }), _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: \"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: \"\\\"M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z\\\"\"\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\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-full 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: \" + 20\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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\", _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: \"\\\"px-4 pb-4 pt-0 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: \"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: \" Reserve\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.p, {\n children: \"The header section comes with a captivating image of the property, set within a rounded-xl container that adds to the card's modern appearance. The image is overlaid with a subtle gradient to ensure text legibility.\"\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Tailwind CSS Testimonial Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this example if you want to display client testimonials or customer feedback on a company's products or services.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"testimonial-card\",\n link: \"card#testimonial-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.TestimonialCard, {}),\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: \"\\\"flex w-full p-4 max-w-lg flex-col rounded-lg bg-white shadow-sm border border-slate-200 my-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: \"\\\"flex items-center gap-4 text-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: \"img\"\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://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1\"\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=1480\"\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 }), _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 }), _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-[58px] w-[58px] !rounded-full object-cover object-center\\\"\"\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 w-full 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: \"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\\\"\"\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-semibold 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: \" 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: \"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: \"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-0 5\\\"\"\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-5 h-5 text-yellow-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: \" \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: \"\\\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z\\\"\"\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: \"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-5 h-5 text-yellow-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: \" \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: \"\\\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z\\\"\"\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: \"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-5 h-5 text-yellow-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: \" \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: \"\\\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z\\\"\"\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: \"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-5 h-5 text-yellow-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: \" \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: \"\\\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z\\\"\"\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: \"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-5 h-5 text-yellow-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: \" \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: \"\\\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z\\\"\"\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: \"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-xs uppercase font-bold text-slate-500 mt-0.5\\\"\"\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: \" Designer @ Google\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"\\\"mt-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: \"\\\"text-base text-slate-600 font-light leading-normal\\\"\"\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: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026quot;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"I found solution to all my design needs from Creative Tim. I use\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" them as a freelancer in my hobby projects for fun! And its really\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" affordable, very humble guys !!!\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026quot;\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(\"br\", {}), \"\\n\", _jsx(_components.p, {\n children: \"The overall design of the card, with its minimalistic approach and focus on readability (using contrasting text colors and a clear font), ensures that the testimonial message is easily accessible to website visitors.\"\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Tailwind CSS Horizontal Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This example contains a modern, wide-format card UI component designed for featuring news articles, blog posts, or announcements. It comes with a left-aligned image (covering approximately 40% of the card's width), a content section, a headline, a brief description, and a \\\"Learn More\\\" button.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"horizontal-card\",\n link: \"card#horizontal-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.HorizontalCard, {}),\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: \"\\\"relative flex flex-col md:flex-row w-full my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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 p-2.5 md:w-2/5 shrink-0 overflow-hidden\\\"\"\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://images.unsplash.com/photo-1522202176988-66273c2fd55f?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=1471\"\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: \"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: \"\\\"card-image\\\"\"\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 rounded-md md:rounded-lg object-cover\\\"\"\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: \"\\\"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: \"\\\"mb-4 rounded-full bg-teal-600 py-0.5 px-2.5 border border-transparent text-xs text-white transition-all shadow-sm w-20 text-center\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"\u003eSTARTUP\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: \"h4\"\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-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Lyft launching cross-platform service this week\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h4\"\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: \"\\\"mb-8 text-slate-600 leading-normal 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: \" Like so many organizations these days, Autodesk is a company in\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" transition. It was until recently a traditional boxed software company\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" selling licenses. Yet its own business model disruption is only part\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" of the story\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"#\\\"\"\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-semibold text-sm hover:underline flex items-center\\\"\"\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: \"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: \"\\\"ml-2 h-4 w-4\\\"\"\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: \"\\\"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: \"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: \"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: \"\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: \"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 }), _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 }), _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 }), _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: \"\\\"M14 5l7 7m0 0l-7 7m7-7H3\\\"\"\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: \"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: \"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: \"Tailwind CSS Ecommerce Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this card for e-commerce platforms, online stores, or product showcase pages. It offers the users a quick overview of the item, its price, and a straightforward option to add it to their shopping cart.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"ecommerce-card\",\n link: \"card#ecommerce-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.EcommerceCard, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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 p-2.5 h-96 overflow-hidden rounded-xl bg-clip-border\\\"\"\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://images.unsplash.com/photo-1629367494173-c78a56567877?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=927\"\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: \"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: \"\\\"card-image\\\"\"\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 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\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-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-2 flex items-center justify-between\\\"\"\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 text-xl font-semibold\\\"\"\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: \" Apple AirPods\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-cyan-600 text-xl font-semibold\\\"\"\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: \" $95.00\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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-600 leading-normal 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: \" With plenty of talk and listen time, voice-activated Siri access, and\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" an available wireless charging case.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 w-full mt-6 bg-cyan-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-cyan-700 focus:shadow-none active:bg-cyan-700 hover:bg-cyan-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: \" Add to Cart\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Card with List\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-list\",\n link: \"card#card-with-list\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.CardWithList, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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-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-4 flex items-center justify-between\\\"\"\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-slate-800 text-lg font-semibold\\\"\"\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: \" Latest Customers\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"a\"\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: \"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: \"\\\"#\\\"\"\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: \"\\\"text-slate-600\\\"\"\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: \" View all\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"divide-y divide-slate-200\\\"\"\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 justify-between pb-3 pt-3 last:pb-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: \"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-x-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: \"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://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg\\\"\"\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: \"\\\"Maria Jimenez\\\"\"\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-8 w-8 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: \"\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: \"h6\"\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-semibold\\\"\"\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: \" Maria Jimenez\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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-600 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: \" maria@gmail.com\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"h6\"\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-600 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: \" $400\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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 justify-between pb-3 pt-3 last:pb-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: \"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-x-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: \"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://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-6.jpg\\\"\"\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: \"\\\"John Micheal\\\"\"\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-8 w-8 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: \"\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: \"h6\"\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-semibold\\\"\"\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: \" John Micheal\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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-600 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: \" john@gmail.com\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"h6\"\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-600 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: \" $420\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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 justify-between pb-3 pt-3 last:pb-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: \"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-x-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: \"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://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg\\\"\"\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: \"\\\"Alexa Liras\\\"\"\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-8 w-8 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: \"\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: \"h6\"\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-semibold\\\"\"\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: \" Alexa Liras\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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-600 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: \" alexa@gmail.com\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"h6\"\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-600 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: \" $340\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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 justify-between pb-3 pt-3 last:pb-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: \"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-x-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: \"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://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg\\\"\"\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: \"\\\"Richard Gran\\\"\"\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-8 w-8 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: \"\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: \"h6\"\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-semibold\\\"\"\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: \" Richard Gran\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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-600 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: \" richard@gmail.com\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"h6\"\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-600 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: \" $520\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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 justify-between pb-3 pt-3 last:pb-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: \"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-x-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: \"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://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg\\\"\"\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: \"\\\"Micheal Levi\\\"\"\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-8 w-8 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: \"\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: \"h6\"\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-semibold\\\"\"\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: \" Micheal Levi\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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-600 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: \" michael@gmail.com\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"h6\"\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-600 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: \" $520\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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: \"Text Only Card\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Use this card example with clean design for place where only a basic text, like description or title and description are needed. It features a light typography and comfortable spacing.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"text-only-card\",\n link: \"card#text-only-card\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.TextOnlyCard, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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-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: \"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: \"\\\"mb-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check Text\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-600 leading-normal 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 place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Card with Tabs\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This card example features multiple tabs with content; this allows users to switch between\\ndifferent sections within the same card. It's perfect for organizing related information in\\na compact space.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(\"b\", {\n className: \"text-blue-500\",\n children: \"Important: \"\n }), \" This example requires the \", _jsx(\"a\", {\n className: \"text-blue-500\",\n href: \"/docs/html/tabs#required-script\",\n target: \"_blank\",\n children: \"Tabs Javascript\"\n }), \" to be included in the project.\"]\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-tabs\",\n link: \"card#card-with-tabs\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.CardWithTabs, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-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: \"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\\\"\"\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: \"ul\"\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-wrap px-1.5 py-1.5 list-none rounded-md bg-slate-100\\\"\"\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-tabs\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"tabs\\\"\"\n }), _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: \"\\\"list\\\"\"\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: \"li\"\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: \"\\\"z-30 flex-auto text-center\\\"\"\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: \"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: \"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-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-md cursor-pointer text-slate-600 bg-inherit\\\"\"\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-tab-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: \"\\\"\\\"\"\n }), _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: \"\\\"tab\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"aria-selected\"\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: \"aria-controls\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"dashboard\\\"\"\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: \" Dashboard\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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: \"\\\"z-30 flex-auto text-center\\\"\"\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: \"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: \"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-center w-full px-0 py-2 mb-0 text-sm transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-600 bg-inherit\\\"\"\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-tab-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: \"\\\"\\\"\"\n }), _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: \"\\\"tab\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"aria-selected\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"false\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"aria-controls\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"profile\\\"\"\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: \" Profile\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"li\"\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: \"\\\"z-30 flex-auto text-center\\\"\"\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: \"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: \"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-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit\\\"\"\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-tab-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: \"\\\"\\\"\"\n }), _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: \"\\\"tab\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"aria-selected\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"false\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"aria-controls\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"settings\\\"\"\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: \" Settings\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"li\"\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: \"ul\"\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: \"data-tab-content\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#A5D6FF\"\n },\n children: \"\\\"\\\"\"\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-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: \"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: \"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: \"\\\"dashboard\\\"\"\n }), _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: \"\\\"tabpanel\\\"\"\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: \"\\\"mb-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check Text\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-600 leading-normal font-light\\\"\"\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: \" Because it\"\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: \"s about motivating the doers. Because 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\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" here to follow my dreams and inspire other people to follow their\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" dreams, too.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \"\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: \"\\\"hidden opacity-0\\\"\"\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: \"\\\"profile\\\"\"\n }), _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: \"\\\"tabpanel\\\"\"\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: \"\\\"mb-2 text-slate-800 text-xl font-semibold\\\"\"\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 place is close to Barceloneta\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-600 leading-normal 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 reading of all good books is like a conversation with the\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" finest minds of past centuries. Follow my dreams and inspire other people.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \"\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: \"\\\"hidden opacity-0\\\"\"\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: \"\\\"settings\\\"\"\n }), _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: \"\\\"tabpanel\\\"\"\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: \"\\\"mb-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Close to Barceloneta\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-600 leading-normal 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: \" Comparing yourself to others is the thief of joy. \"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" The reading of all good books is like a conversation\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"Card with Bottom Image\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This card component contains the title, text, and an image at the bottom. It is a good example for displaying news, articles, or blog posts where you want the title to be the most important thing on the card.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-bottom-image\",\n link: \"card#card-with-bottom-image\",\n component: _jsx(HTMLCardExamples.CardWithBottomImage, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96\\\"\"\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-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: \"h6\"\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-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Special News Article\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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-600 leading-normal 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 place is close to Barceloneta Beach and bus stop just 2 min by walk\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" and near to \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026quot;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \"Naviglio\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79C0FF\"\n },\n children: \"\u0026quot;\"\n }), _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" where you can enjoy the main night life in\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \"\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-56 m-2.5 overflow-hidden text-white rounded-md\\\"\"\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 }), _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-1725610588086-b9e38da987f7?q=80\u0026w=1200\\\"\"\n }), _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: \"\\\"card-image\\\"\"\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: \"Card with Animation\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"On this example we added a hover effect to the card. When you hover over the card, the image will zoom using cubic bezier animation and also the card shadow will change.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-animation\",\n link: \"card#card-with-animation\",\n component: _jsx(HTMLCardExamples.CardWithAnimation, {}),\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: \"\\\"cursor-pointer group relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 hover:shadow-lg transition-shadow duration-300\\\"\"\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 h-56 m-2.5 overflow-hidden text-white rounded-md\\\"\"\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 }), _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: \"\\\"transition-transform duration-500 ease-[cubic-bezier(0.25, 1, 0.5, 1)] transform group-hover:scale-110\\\"\"\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: \"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-1496436818536-e239445d3327?q=80\u0026w=1200\\\"\"\n }), _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: \"\\\"investment-seed-round\\\"\"\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-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: \"h6\"\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-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Successful Seed Round\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" \u003c/\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"h6\"\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-600 leading-normal 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: \" We are thrilled to announce the completion of our seed round, securing $2M in investment to fuel product development and market expansion.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \"\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: \"\\\"px-4 pb-4 pt-0 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: \"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: \" Read article\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Card with Alert\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Card with alert is a card that contains a message that is displayed at the top of the card. It is useful for displaying important information that the user needs to know.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-alert\",\n link: \"card#card-with-alert\",\n component: _jsx(HTMLCardExamples.CardWithAlert, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-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: \"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 w-full p-3 pr-12 text-sm text-white bg-red-500 rounded-md\\\"\"\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: \"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 }), _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: \"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.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: \"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: \"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-5 h-5 mr-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: \"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: \"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 }), _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 }), _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: \"\\\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5\\\"\"\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: \" Please update your card details.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 justify-center transition-all w-8 h-8 rounded-md text-white hover:bg-white/10 active:bg-white/10 absolute top-1.5 right-1.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: \"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: \"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 }), _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: \"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: \"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 }), _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 }), _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: \"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 }), _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 }), _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 }), _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: \"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: \"\\\"p-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: \"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 mb-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: \"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 }), _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: \"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.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: \"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: \"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 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: \" \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: \"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 }), _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 }), _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: \"\\\"M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418\\\"\"\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: \"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: \"\\\"ml-2 text-slate-800 text-xl font-semibold\\\"\"\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 CMS for startup\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"block text-slate-600 leading-normal font-light mb-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: \" Because it\"\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: \"s about motivating the doers. Because 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 here to follow my dreams and inspire others.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"#\\\"\"\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-semibold text-sm hover:underline flex items-center\\\"\"\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: \"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: \"\\\"ml-2 h-4 w-4\\\"\"\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: \"\\\"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: \"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: \"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: \"\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: \"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 }), _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 }), _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 }), _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: \"\\\"M14 5l7 7m0 0l-7 7m7-7H3\\\"\"\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: \"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: \"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: \"Card with Centered Content\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Card with centered content is a card that contains all the details encapsulated in the middle of the card.\\nIt is useful for displaying contextually important information that the user needs to know. The card is taking more space than the other cards.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-centered-content\",\n link: \"card#card-with-centered-content\",\n component: _jsx(HTMLCardExamples.CardWithCenteredContent, {}),\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: \"\\\"relative min-h-80 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-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: \"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-3 text-center\\\"\"\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 justify-center mb-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: \"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: \"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 }), _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: \"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.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: \"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: \"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-10 h-10 text-purple-400\\\"\"\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: \"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 }), _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 }), _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.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z\\\"\"\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: \"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 }), _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 }), _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: \"\\\"M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z\\\"\"\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: \"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 justify-center mb-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: \"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-slate-800 text-2xl font-semibold\\\"\"\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: \" Lit Ideas for Startups\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"block text-slate-600 leading-normal font-light mb-4 max-w-lg\\\"\"\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: \" Because it\"\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: \"s about motivating the doers. Because 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 here to follow my dreams and inspire others.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \" \"\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-center\\\"\"\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: \"\\\"min-w-32 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\\\"\"\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: \" View 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: \"Card with Placeholder (Empty State)\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This simple tailwind css component is a card that contains an Icon and Text for the empty state.\\nIt is useful for showing a placeholder for the card when there is no data to display.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-placeholder\",\n link: \"card#card-with-placeholder\",\n component: _jsx(HTMLCardExamples.CardWithPlaceholder, {}),\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: \"\\\"relative min-h-60 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-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: \"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-3 text-center\\\"\"\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 justify-center mb-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: \"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: \"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 }), _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: \"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.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: \"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: \"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-400 w-10 h-10\\\"\"\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: \"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 }), _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 }), _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: \"\\\"M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125\\\"\"\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: \"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 justify-center mb-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: \"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-slate-800 text-2xl font-semibold\\\"\"\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: \" No data sources linked.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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: \"\\\"block text-slate-600 leading-normal font-light mb-4 max-w-lg\\\"\"\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: \" No APIs created yet. Contact us for more details.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Card with Scroll Area\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This example shows a simple tailwind css card that contains a scrollable area under the title.\\nIt is useful for showing a scrollable area for the card when there is more content to display.\"\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-scroll-area\",\n link: \"card#card-with-scroll-area\",\n component: _jsx(HTMLCardExamples.CardWithScrollArea, {}),\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: \"\\\"relative w-96 bg-white shadow-sm border border-slate-200 rounded-lg p-3 pb-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: \"\\\"flex justify-center mb-4 mt-5\\\"\"\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: \"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 }), _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: \"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.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: \"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: \"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-10 h-10 text-purple-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: \"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: \"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 }), _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 }), _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.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z\\\"\"\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: \"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 }), _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 }), _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: \"\\\"M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z\\\"\"\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: \"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: \"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 justify-center mb-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: \"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-slate-800 text-2xl font-semibold\\\"\"\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: \" Scrollable Content\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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: \"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-3 mt-5 border-t border-slate-100 text-center max-h-60 overflow-y-auto [\u0026::-webkit-scrollbar-thumb]:rounded-xl [\u0026::-webkit-scrollbar-thumb]:bg-slate-300 [\u0026::-webkit-scrollbar]:w-1.5 [\u0026::-webkit-scrollbar-track]:rounded-xl [\u0026::-webkit-scrollbar-track]:bg-slate-100\\\"\"\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: \"\\\"block text-slate-600 leading-normal font-light mb-4 max-w-lg\\\"\"\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: \" Because it\"\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: \"s about motivating the doers. Because 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 here to follow my dreams and inspire others. Here is some additional text to test the scrolling feature. Imagine this is a long article that you can scroll through.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 \u003c\"\n }), _jsx(_components.span, {\n style: {\n color: \"#7EE787\"\n },\n children: \"br\"\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: \"\\\"block text-slate-600 leading-normal font-light mb-4 max-w-lg\\\"\"\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: \" Still more content to keep the scroll active. Let's make sure the scrollbar styling is correct. Apple's scrollbar style is subtle, with a thin, sleek design. Scroll down for more! Keep adding more content to ensure the scroll is working. The card's content should now be scrollable. Test it out!\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#C9D1D9\"\n },\n children: \" More text to fill the space, as we continue to check how scroll behaves.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\n })\n })\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n children: \"Card with Hover Effect\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Use this card example with simple design and a beautiful hover effect for places where you want the attention of the user to be focused. It is great in combination with an \", _jsx(\"code\", {\n children: \"a tag\"\n }), \" for linking to other pages, categories or blog posts.\"]\n }), \"\\n\", _jsx(CodePreview, {\n id: \"card-with-hover\",\n link: \"card#card-with-hover\",\n className: \"mt-4\",\n component: _jsx(HTMLCardExamples.CardWithHover, {}),\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: \"\\\"relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 hover:border-slate-300 hover:shadow-md rounded-lg transition-all cursor-pointer w-96\\\"\"\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-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: \"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: \"\\\"mb-2 text-slate-800 text-xl font-semibold\\\"\"\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: \" Website Review Check Text\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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-600 leading-normal 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 place is close to Barceloneta Beach and bus stop just 2 min by walk and near to Naviglio where you can enjoy the main night life in Barcelona.\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_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 })\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 card 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/cards\",\n target: \"_blank\",\n children: \"Cards\"\n }), _jsx(\"br\", {}), \"\\n• \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks/web3-cards\",\n target: \"_blank\",\n children: \"Web 3.0 Cards\"\n }), _jsx(\"br\", {}), \"\\n• \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks/kpi-cards\",\n target: \"_blank\",\n children: \"KPI Cards\"\n }), _jsx(\"br\", {}), \"\\n• \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/blocks/pricing-sections\",\n target: \"_blank\",\n children: \"Pricing Sections\"\n }), _jsx(\"br\", {})]\n }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(\"span\", {\n id: \"best-practices\"\n }), \"\\n\", _jsx(_components.h3, {\n children: \"Card Component Best Practices for Developers:\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"• Maintain a consistent design across all cards. This includes using uniform sizes, typography, colors, and spacing to create a cohesive user experience. \", _jsx(\"br\", {}), \"\\n• Choose high-quality, relevant images that complement the card's content.\", _jsx(\"br\", {}), \"\\n• Organize content within a card to reflect a clear hierarchy of information. \", _jsx(\"br\", {}), \"\\n• Avoid overcrowding cards with too much information or too many actions. Stick to the essentials to prevent cognitive overload.\", _jsx(\"br\", {}), \"\\n• Offer visual feedback on interaction. \", _jsx(\"br\", {}), \"\\n• Design card components to be reusable across different parts of the application. \", _jsx(\"br\", {})]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Check out more \", _jsxs(\"b\", {\n children: [\"card \", _jsx(\"a\", {\n href: \"https://www.material-tailwind.com/roots-of-ui-ux-design\",\n target: \"_blank\",\n children: \" UI best practices\"\n })]\n }), \" if you want to create intuitive user interfaces.\"]\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","card"]},"__N_SSG":true},"page":"/docs/[...slug]","query":{"slug":["html","card"]},"buildId":"Hmxk9y-rTbot2nv4Ta3ZE","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 Card - Material Tailwind