1<!DOCTYPE html><html lang="en" dir="ltr" data-beasties-container><head> 2 <meta charset="utf-8"> 3 <title>Tailfind | Convert Live Page into Tailwind CSS</title> 4 <base href="/"> 5 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" name="viewport"> 6 <meta content="Tailfind is a Chrome extension for converting live page, capturing selected UI, and exporting clean Tailwind CSS." name="description"> 7 <meta content="#06111d" name="theme-color"> 8 <meta content="dark light" name="color-scheme"> 9 <meta content="Tailfind" name="application-name"> 10 <meta content="Tailfind" name="apple-mobile-web-app-title"> 11 <meta content="Tailfind" property="og:site_name"> 12 <meta content="website" property="og:type"> 13 <meta content="Tailfind | Convert Live Page into Tailwind CSS" property="og:title"> 14 <meta content="Tailfind is a Chrome extension for converting live page, capturing selected UI, and exporting clean Tailwind CSS." property="og:description"> 15 <meta content="https://tailfind.org/social/tailfind-og.png" property="og:image"> 16 <meta content="summary_large_image" name="twitter:card"> 17 <meta content="Tailfind | Convert Live Page into Tailwind CSS" name="twitter:title"> 18 <meta content="Tailfind is a Chrome extension for converting live page, capturing selected UI, and exporting clean Tailwind CSS." name="twitter:description"> 19 <meta content="https://tailfind.org/social/tailfind-og.png" name="twitter:image"> 20 <link href="/favicon.ico" rel="icon" sizes="any"> 21 <link href="/favicon.svg" rel="icon" type="image/svg+xml"> 22 <link href="/favicon-32.png" rel="icon" sizes="32x32" type="image/png"> 23 <link href="/favicon-48.png" rel="icon" sizes="48x48" type="image/png"> 24 <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"> 25 <link href="/site.webmanifest" rel="manifest"> 26 <link href="https://fonts.googleapis.com" rel="preconnect"> 27 <link crossorigin href="https://fonts.gstatic.com" rel="preconnect"> 28<style>@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggqxSuXd.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:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggOxSuXd.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggSxSuXd.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:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggixSuXd.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:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.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:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.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:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggqxSuXd.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:Manrope;font-style:normal;font-weight:500;font-display:swap;
28src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggOxSuXd.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggSxSuXd.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:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggixSuXd.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:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.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:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.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:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggqxSuXd.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:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggOxSuXd.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggSxSuXd.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:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggixSuXd.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:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.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:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.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:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggqxSuXd.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:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggOxSuXd.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggSxSuXd.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:Manrope;font-style:normal;font-weight:700;font-display:swap;
28src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggixSuXd.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:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.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:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.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:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggqxSuXd.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:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggOxSuXd.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggSxSuXd.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:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggixSuXd.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:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.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:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.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:Sora;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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:Sora;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.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:Sora;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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:Sora;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.woff2) format("woff2");
28unicode-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:Sora;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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:Sora;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.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:Sora;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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:Sora;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.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:Sora;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xsaQ.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:Sora;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/sora/v17/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-x.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}@layer properties;:root{--vscode-sash-size: 4px;--vscode-sash-hover-size: 4px}@layer theme,base,components,utilities;@layer theme{:root{--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50: oklch(97.1% .013 17.38);--color-red-300: oklch(80.8% .114 19.571);--color-red-950: oklch(25.8% .092 26.042);--color-amber-50: oklch(98.7% .022 95.277);--color-amber-300: oklch(87.9% .169 91.605);--color-amber-950: oklch(27.9% .077 45.635);--color-emerald-50: oklch(97.9% .021 166.113);--color-emerald-300: oklch(84.5% .143 164.978);--color-emerald-950: oklch(26.2% .051 172.552);--color-sky-50: oklch(97.7% .013 236.62);--color-sky-300: oklch(82.8% .111 230.318);--color-sky-950: oklch(29.3% .066 243.157);--color-blue-100: oklch(93.2% .032 255.585);--color-blue-200: oklch(88.2% .059 254.128);--color-blue-300: oklch(80.9% .105 251.813);--color-blue-400: oklch(70.7% .165 254.624);--color-blue-500: oklch(62.3% .214 259.815);--color-slate-50: oklch(98.4% .003 247.858);--color-slate-100: oklch(96.8% .007 247.896);--color-slate-200: oklch(92.9% .013 255.508);--color-slate-300: oklch(86.9% .022 252.894);--color-slate-400: oklch(70.4% .04 256.788);--color-slate-500: oklch(55.4% .046 257.417);--color-slate-800: oklch(27.9% .041 260.031);--color-slate-900: oklch(20.8% .042 265.755);--color-slate-950: oklch(12.9% .042 264.695);--color-gray-200: oklch(92.8% .006 264.531);--color-gray-300: oklch(87.2% .01 258.338);--color-gray-400: oklch(70.7% .022 261.325);--color-gray-700: oklch(37.3% .034 259.733);--color-gray-800: oklch(27.8% .033 256.848);--color-gray-900: oklch(21% .034 264.665);--color-black: #000;--color-white: #fff;--spacing: .25rem;--container-xs: 20rem;--container-sm: 24rem;--container-md: 28rem;--container-lg: 32rem;--container-xl: 36rem;--container-2xl: 42rem;
28--container-3xl: 48rem;--container-4xl: 56rem;--container-7xl: 80rem;--text-xs: .75rem;--text-xs--line-height: calc(1 / .75);--text-sm: .875rem;--text-sm--line-height: calc(1.25 / .875);--text-base: 1rem;--text-base--line-height: 1.5 ;--text-lg: 1.125rem;--text-lg--line-height: calc(1.75 / 1.125);--text-xl: 1.25rem;--text-xl--line-height: calc(1.75 / 1.25);--text-3xl: 1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl: 2.25rem;--text-4xl--line-height: calc(2.5 / 2.25);--text-5xl: 3rem;--text-5xl--line-height: 1;--text-6xl: 3.75rem;--text-6xl--line-height: 1;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--tracking-tight: -.025em;--tracking-widest: .1em;--leading-tight: 1.25;--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--radius-4xl: 2rem;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--blur-sm: 8px;--blur-md: 12px;--blur-xl: 24px;--aspect-video: 16 / 9;--default-transition-duration: .15s;--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--container-site: 1280px;--font-manrope: "Manrope", sans-serif;--font-sora: "Sora", sans-serif}}@layer base{*,:after,:before{box-sizing:border-box;margin:0;padding:0;border:0 solid}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}h1,h2,h3,h4{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}ul{list-style:none}img,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}button{appearance:button}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.inset-px{inset:1px}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-full{bottom:100%}.left-1\/2{left:50%}.z-50{z-index:50}.z-\[60\]{z-index:60}.container{width:100%}@media(width>=40rem){.container{max-width:40rem}}@media(width>=48rem){.container{max-width:48rem}}@media(width>=64rem){.container{max-width:64rem}}@media(width>=80rem){.container{max-width:80rem}}@media(width>=96rem){.container{max-width:96rem}}.-m-2{margin:calc(var(--spacing) * -2)}.mx-auto{margin-inline:auto}.my-0{margin-block:calc(var(--spacing) * 0)}
28.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-20{margin-top:calc(var(--spacing) * 20)}.mt-auto{margin-top:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-video{aspect-ratio:var(--aspect-video)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-full{width:100%;height:100%}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-136{height:calc(var(--spacing) * 136)}.h-full{height:100%}.max-h-12{max-height:calc(var(--spacing) * 12)}.max-h-\[min\(31rem\,calc\(100dvh-6rem\)\)\]{max-height:min(31rem,calc(100dvh - 6rem))}.max-h-dvh{max-height:100dvh}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-dvh{min-height:100dvh}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-\[200px\]{width:200px}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-none{flex:none}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.basis-0{flex-basis:calc(var(--spacing) * 0)}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x: 100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[1\.25rem_minmax\(0\,1fr\)\]{grid-template-columns:1.25rem minmax(0,1fr)}.grid-cols-\[auto_minmax\(0\,1fr\)\]{grid-template-columns:auto minmax(0,1fr)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-\[0\.3em\]{gap:.3em}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-x-5{column-gap:calc(var(--spacing) * 5)}.gap-x-8{column-gap:calc(var(--spacing) * 8)}.gap-x-10{column-gap:calc(var(--spacing) * 10)}.gap-x-12{column-gap:calc(var(--spacing) * 12)}.gap-y-1{row-gap:calc(var(--spacing) * 1)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.gap-y-3{row-gap:calc(var(--spacing) * 3)}.gap-y-6{row-gap:calc(var(--spacing) * 6)}.gap-y-10{row-gap:calc(var(--spacing) * 10)}.gap-y-16{row-gap:calc(var(--spacing) * 16)}.overflow-hidden{overflow:hidden}.overflow-x-clip{overflow-x:clip}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-\[1\.25rem\]{border-radius:1.25rem}.rounded-\[14px\]{border-radius:14px}
28.rounded-\[calc\(var\(--radius-lg\)\+1px\)\]{border-radius:calc(var(--radius-lg) + 1px)}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-3xl{border-top-left-radius:var(--radius-3xl);border-top-right-radius:var(--radius-3xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-\[rgba\(96\,165\,250\,0\.22\)\]{border-color:#60a5fa38}.border-gray-700{border-color:var(--color-gray-700)}.border-white\/5{border-color:color-mix(in srgb,#fff 5%,transparent)}@supports (color: color-mix(in lab,red,red)){.border-white\/5{border-color:color-mix(in oklab,var(--color-white) 5%,transparent)}}.border-white\/10{border-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){.border-white\/10{border-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.border-white\/12{border-color:color-mix(in srgb,#fff 12%,transparent)}@supports (color: color-mix(in lab,red,red)){.border-white\/12{border-color:color-mix(in oklab,var(--color-white) 12%,transparent)}}.bg-\[rgba\(15\,23\,42\,0\.88\)\]{background-color:#0f172ae0}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-slate-950{background-color:var(--color-slate-950)}.bg-slate-950\/40{background-color:color-mix(in srgb,oklch(12.9% .042 264.695) 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-slate-950\/40{background-color:color-mix(in oklab,var(--color-slate-950) 40%,transparent)}}.bg-slate-950\/70{background-color:color-mix(in srgb,oklch(12.9% .042 264.695) 70%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-slate-950\/70{background-color:color-mix(in oklab,var(--color-slate-950) 70%,transparent)}}.bg-slate-950\/95{background-color:color-mix(in srgb,oklch(12.9% .042 264.695) 95%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-slate-950\/95{background-color:color-mix(in oklab,var(--color-slate-950) 95%,transparent)}}.bg-white\/5{background-color:color-mix(in srgb,#fff 5%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-white\/5{background-color:color-mix(in oklab,var(--color-white) 5%,transparent)}}.bg-white\/\[0\.06\]{background-color:color-mix(in srgb,#fff 6%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-white\/\[0\.06\]{background-color:color-mix(in oklab,var(--color-white) 6%,transparent)}}.bg-white\/\[0\.024\]{background-color:color-mix(in srgb,#fff 2.4%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-white\/\[0\.024\]{background-color:color-mix(in oklab,var(--color-white) 2.4%,transparent)}}.bg-white\/\[0\.025\]{background-color:color-mix(in srgb,#fff 2.5%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-white\/\[0\.025\]{background-color:color-mix(in oklab,var(--color-white) 2.5%,transparent)}}.bg-\[linear-gradient\(90deg\,rgba\(148\,163\,184\,0\.04\)_1px\,transparent_1px\)\]{background-image:linear-gradient(90deg,rgba(148,163,184,.04) 1px,transparent 1px)}.bg-\[linear-gradient\(180deg\,\#3b82f6\,\#2563eb\)\]{background-image:linear-gradient(180deg,#3b82f6,#2563eb)}.bg-\[linear-gradient\(180deg\,rgba\(4\,13\,24\,0\.74\)\,rgba\(4\,13\,24\,0\.88\)_32\%\,rgba\(2\,8\,23\,0\.98\)_100\%\)\]{background-image:linear-gradient(180deg,#040d18bd,#040d18e0 32%,#020817fa)}.bg-\[linear-gradient\(180deg\,rgba\(148\,163\,184\,0\.032\)_1px\,transparent_1px\)\]{background-image:linear-gradient(180deg,rgba(148,163,184,.032) 1px,transparent 1px)}.bg-\[radial-gradient\(circle_at_top\,rgba\(6\,182\,212\,0\.18\)\,transparent_48\%\)\]{background-image:radial-gradient(circle at top,rgba(6,182,212,.18),transparent 48%)}.bg-\[radial-gradient\(circle_at_top_right\,rgba\(37\,99\,235\,0\.18\)\,transparent_28\%\)\,linear-gradient\(180deg\,rgba\(17\,24\,39\,0\.98\)\,rgba\(15\,23\,42\,0\.98\)\)\]{background-image:radial-gradient(circle at top right,rgba(37,99,235,.18),transparent 28%),linear-gradient(180deg,#111827fa,#0f172afa)}.mask-\[linear-gradient\(180deg\,transparent_0\%\,black_0\%\,black_100\%\,transparent_100\%\)\]{-webkit-mask-image:linear-gradient(180deg,transparent 0%,black 0%,black 100%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,black 0%,black 100%,transparent 100%)}.bg-size-\[68px_100\%\]{background-size:68px 100%}.bg-size-\[100\%_68px\]{background-size:100% 68px}.fill-current{fill:currentcolor}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-top{object-position:top}.p-2{padding:calc(var(--spacing) * 2)}.p-5{padding:calc(var(--spacing) * 5)}.p-7{padding:calc(var(--spacing) * 7)}.p-8{padding:calc(var(--spacing) * 8)}.px-0{padding-inline:calc(var(--spacing) * 0)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-7{padding-inline:calc(var(--spacing) * 7)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0{padding-block:calc(var(--spacing) * 0)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-16{padding-block:calc(var(--spacing) * 16)}.ps-\[18px\]{padding-inline-start:18px}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-24{padding-top:calc(var(--spacing) * 24)}.pt-\[calc\(1\.5rem\+var\(--safe-area-top\)\)\]{padding-top:calc(1.5rem + var(--safe-area-top))}.pt-\[var\(--safe-area-top\)\]{padding-top:var(--safe-area-top)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pr-\[calc\(1\.5rem\+var\(--safe-area-right\)\)\]{padding-right:calc(1.5rem + var(--safe-area-right))}.pr-\[var\(--safe-area-right\)\]{padding-right:var(--safe-area-right)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pb-12{padding-bottom:calc(var(--spacing) * 12)}.pb-16{padding-bottom:calc(var(--spacing) * 16)}.pb-\[calc\(2rem\+var\(--safe-area-bottom\)\)\]{padding-bottom:calc(2rem
28+ var(--safe-area-bottom))}.pl-\[calc\(1\.5rem\+var\(--safe-area-left\)\)\]{padding-left:calc(1.5rem + var(--safe-area-left))}.pl-\[var\(--safe-area-left\)\]{padding-left:var(--safe-area-left)}.text-center{text-align:center}.text-left{text-align:left}.font-sora{font-family:var(--font-sora)}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading, var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading, var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading, var(--text-5xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-base\/7{font-size:var(--text-base);line-height:calc(var(--spacing) * 7)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-lg\/8{font-size:var(--text-lg);line-height:calc(var(--spacing) * 8)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-sm\/6{font-size:var(--text-sm);line-height:calc(var(--spacing) * 6)}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.leading-4{--tw-leading: calc(var(--spacing) * 4);line-height:calc(var(--spacing) * 4)}.leading-5{--tw-leading: calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-6{--tw-leading: calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-7{--tw-leading: calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}.leading-12{--tw-leading: calc(var(--spacing) * 12);line-height:calc(var(--spacing) * 12)}.leading-none{--tw-leading: 1;line-height:1}.leading-tight{--tw-leading: var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight: var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-1\.2px\]{--tw-tracking: -1.2px;letter-spacing:-1.2px}.tracking-\[0\.2em\]{--tw-tracking: .2em;letter-spacing:.2em}.tracking-\[0\.18em\]{--tw-tracking: .18em;letter-spacing:.18em}.tracking-\[0\.22em\]{--tw-tracking: .22em;letter-spacing:.22em}.tracking-tight{--tw-tracking: var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-balance{text-wrap:balance}.text-nowrap{text-wrap:nowrap}.text-pretty{text-wrap:pretty}.break-words{overflow-wrap:break-word}.text-blue-100{color:var(--color-blue-100)}.text-blue-100\/70{color:color-mix(in srgb,oklch(93.2% .032 255.585) 70%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-blue-100\/70{color:color-mix(in oklab,var(--color-blue-100) 70%,transparent)}}.text-blue-200{color:var(--color-blue-200)}.text-blue-300{color:var(--color-blue-300)}.text-blue-400{color:var(--color-blue-400)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-sky-300{color:var(--color-sky-300)}.text-slate-50{color:var(--color-slate-50)}.text-slate-100{color:var(--color-slate-100)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.text-white\/70{color:color-mix(in srgb,#fff 70%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\/70{color:color-mix(in oklab,var(--color-white) 70%,transparent)}}.text-white\/85{color:color-mix(in srgb,#fff 85%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\/85{color:color-mix(in oklab,var(--color-white) 85%,transparent)}}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0%}.opacity-100{opacity:100%}
28.shadow-2xl{--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.04\)\]{--tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,.04));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-black\/20{--tw-shadow-color: color-mix(in srgb, #000 20%, transparent)}@supports (color: color-mix(in lab,red,red)){.shadow-black\/20{--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-sha
28dow-alpha), transparent)}}.shadow-black\/40{--tw-shadow-color: color-mix(in srgb, #000 40%, transparent)}@supports (color: color-mix(in lab,red,red)){.shadow-black\/40{--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent)}}.ring-white\/10{--tw-ring-color: color-mix(in srgb, #fff 10%, transparent)}@supports (color: color-mix(in lab,red,red)){.ring-white\/10{--tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-white\/15{outline-color:color-mix(in srgb,#fff 15%,transparent)}@supports (color: color-mix(in lab,red,red)){.outline-white\/15{outline-color:color-mix(in oklab,var(--color-white) 15%,transparent)}}.outline-white\/20{outline-color:color-mix(in srgb,#fff 20%,transparent)}@supports (color: color-mix(in lab,red,red)){.outline-white\/20{outline-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.backdrop-blur{--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-\[18px\]{--tw-backdrop-blur: blur(18px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur: blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur: blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur: blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-300{--tw-duration: .3s;transition-duration:.3s}.duration-\[400ms\]{--tw-duration: .4s;transition-duration:.4s}.ease-\[cubic-bezier\(0\,0\,1\,1\)\]{--tw-ease: cubic-bezier(0,0,1,1);transition-timing-function:cubic-bezier(0,0,1,1)}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}
28.ease-out{--tw-ease: var(--ease-out);transition-timing-function:var(--ease-out)}@media(hover:hover){.group-hover\:pointer-events-auto:is(:where(.group):hover *){pointer-events:auto}}@media(hover:hover){.group-hover\:visible:is(:where(.group):hover *){visibility:visible}}@media(hover:hover){.group-hover\:rotate-180:is(:where(.group):hover *){rotate:180deg}}@media(hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:100%}}@media(hover:hover){.hover\:border-\[rgba\(96\,165\,250\,0\.34\)\]:hover{border-color:#60a5fa57}}@media(hover:hover){.hover\:border-white\/18:hover{border-color:color-mix(in srgb,#fff 18%,transparent)}@supports (color: color-mix(in lab,red,red)){.hover\:border-white\/18:hover{border-color:color-mix(in oklab,var(--color-white) 18%,transparent)}}}@media(hover:hover){.hover\:border-white\/20:hover{border-color:color-mix(in srgb,#fff 20%,transparent)}@supports (color: color-mix(in lab,red,red)){.hover\:border-white\/20:hover{border-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}}@media(hover:hover){.hover\:bg-\[rgba\(30\,64\,175\,0\.22\)\]:hover{background-color:#1e40af38}}@media(hover:hover){.hover\:bg-blue-400\/10:hover{background-color:color-mix(in srgb,oklch(70.7% .165 254.624) 10%,transparent)}@supports (color: color-mix(in lab,red,red)){.hover\:bg-blue-400\/10:hover{background-color:color-mix(in oklab,var(--color-blue-400) 10%,transparent)}}}@media(hover:hover){.hover\:bg-white\/5:hover{background-color:color-mix(in srgb,#fff 5%,transparent)}@supports (color: color-mix(in lab,red,red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab,var(--color-white) 5%,transparent)}}}@media(hover:hover){.hover\:text-blue-200:hover{color:var(--color-blue-200)}}@media(hover:hover){.hover\:text-slate-200:hover{color:var(--color-slate-200)}}@media(hover:hover){.hover\:text-white:hover{color:var(--color-white)}}@media(hover:hover){.hover\:brightness-110:hover{--tw-brightness: brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:bg-white\/10:focus{background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){.focus\:bg-white\/10:focus{background-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.focus\:outline:focus{outline-style:var(--tw-outline-style);outline-width:1px}.focus\:outline-2:focus{outline-style:var(--tw-outline-style);outline-width:2px}.focus\:outline-offset-2:focus{outline-offset:2px}.focus\:outline-blue-300\/40:focus{outline-color:color-mix(in srgb,oklch(80.9% .105 251.813) 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.focus\:outline-blue-300\/40:focus{outline-color:color-mix(in oklab,var(--color-blue-300) 40%,transparent)}}.focus-visible\:bg-blue-400\/10:focus-visible{background-color:color-mix(in srgb,oklch(70.7% .165 254.624) 10%,transparent)}@supports (color: color-mix(in lab,red,red)){.focus-visible\:bg-blue-400\/10:focus-visible{background-color:color-mix(in oklab,var(--color-blue-400) 10%,transparent)}}.focus-visible\:bg-white\/5:focus-visible{background-color:color-mix(in srgb,#fff 5%,transparent)}@supports (color: color-mix(in lab,red,red)){.focus-visible\:bg-white\/5:focus-visible{background-color:color-mix(in oklab,var(--color-white) 5%,transparent)}}.focus-visible\:text-slate-200:focus-visible{color:var(--color-slate-200)}.focus-visible\:text-white:focus-visible{color:var(--color-white)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-sha
28dow)}.focus-visible\:ring-blue-300\/70:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(80.9% .105 251.813) 70%, transparent)}@supports (color: color-mix(in lab,red,red)){.focus-visible\:ring-blue-300\/70:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-blue-300) 70%, transparent)}}.focus-visible\:ring-white\/60:focus-visible{--tw-ring-color: color-mix(in srgb, #fff 60%, transparent)}@supports (color: color-mix(in lab,red,red)){.focus-visible\:ring-white\/60:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-white) 60%, transparent)}}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-blue-300\/70:focus-visible{outline-color:color-mix(in srgb,oklch(80.9% .105 251.813) 70%,transparent)}@supports (color: color-mix(in lab,red,red)){.focus-visible\:outline-blue-300\/70:focus-visible{outline-color:color-mix(in oklab,var(--color-blue-300) 70%,transparent)}}.focus-visible\:outline-blue-400:focus-visible{outline-color:var(--color-blue-400)}.focus-visible\:outline-none:focus-visible{--tw-outline-style: none;outline-style:none}.disabled\:cursor-wait:disabled{cursor:wait}.disabled\:bg-white\/\[0\.122\]:disabled{background-color:color-mix(in srgb,#fff 12.2%,transparent)}@supports (color: color-mix(in lab,red,red)){.disabled\:bg-white\/\[0\.122\]:disabled{background-color:color-mix(in oklab,var(--color-white) 12.2%,transparent)}}.disabled\:text-white\/60:disabled{color:color-mix(in srgb,#fff 60%,transparent)}@supports (color: color-mix(in lab,red,red)){.disabled\:text-white\/60:disabled{color:color-mix(in oklab,var(--color-white) 60%,transparent)}}.disabled\:opacity-75:disabled{opacity:75%}@media(prefers-reduced-motion:reduce){.motion-reduce\:transition-none{transition-property:none}}@media(width<64rem){.max-lg\:row-start-1{grid-row-start:1}}@media(width<64rem){.max-lg\:row-start-3{grid-row-start:3}}
28@media(width<64rem){.max-lg\:rounded-t-4xl{border-top-left-radius:var(--radius-4xl);border-top-right-radius:var(--radius-4xl)}}@media(width<64rem){.max-lg\:rounded-t-\[calc\(2rem\+1px\)\]{border-top-left-radius:calc(2rem + 1px);border-top-right-radius:calc(2rem + 1px)}}@media(width<64rem){.max-lg\:rounded-b-4xl{border-bottom-right-radius:var(--radius-4xl);border-bottom-left-radius:var(--radius-4xl)}}@media(width<64rem){.max-lg\:rounded-b-\[calc\(2rem\+1px\)\]{border-bottom-right-radius:calc(2rem + 1px);border-bottom-left-radius:calc(2rem + 1px)}}@media(width<64rem){.max-lg\:text-center{text-align:center}}@media(width>=40rem){.sm\:-m-4{margin:calc(var(--spacing) * -4)}}@media(width>=40rem){.sm\:mx-8{margin-inline:calc(var(--spacing) * 8)}}@media(width>=40rem){.sm\:mt-10{margin-top:calc(var(--spacing) * 10)}}@media(width>=40rem){.sm\:mt-12{margin-top:calc(var(--spacing) * 12)}}@media(width>=40rem){.sm\:mt-16{margin-top:calc(var(--spacing) * 16)}}@media(width>=40rem){.sm\:mt-20{margin-top:calc(var(--spacing) * 20)}}@media(width>=40rem){.sm\:h-5{height:calc(var(--spacing) * 5)}}@media(width>=40rem){.sm\:h-9{height:calc(var(--spacing) * 9)}}@media(width>=40rem){.sm\:w-5{width:calc(var(--spacing) * 5)}}@media(width>=40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=40rem){.sm\:gap-2{gap:calc(var(--spacing) * 2)}}@media(width>=40rem){.sm\:gap-3{gap:calc(var(--spacing) * 3)}}@media(width>=40rem){.sm\:gap-4{gap:calc(var(--spacing) * 4)}}@media(width>=40rem){.sm\:gap-6{gap:calc(var(--spacing) * 6)}}@media(width>=40rem){.sm\:gap-y-0{row-gap:calc(var(--spacing) * 0)}}@media(width>=40rem){.sm\:rounded-2xl{border-radius:var(--radius-2xl)}}@media(width>=40rem){.sm\:rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}}@media(width>=40rem){.sm\:p-4{padding:calc(var(--spacing) * 4)}}@media(width>=40rem){.sm\:p-10{padding:calc(var(--spacing) * 10)}}@media(width>=40rem){.sm\:px-4{padding-inline:calc(var(--spacing) * 4)}}@media(width>=40rem){.sm\:px-10{padding-inline:calc(var(--spacing) * 10)}}@media(width>=40rem){.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}@media(width>=40rem){.sm\:pt-10{padding-top:calc(var(--spacing) * 10)}}@media(width>=40rem){.sm\:pb-0{padding-bottom:calc(var(--spacing) * 0)}}@media(width>=40rem){.sm\:pb-14{padding-bottom:calc(var(--spacing) * 14)}}@media(width>=40rem){.sm\:pl-8{padding-left:calc(var(--spacing) * 8)}}@media(width>=40rem){.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading, var(--text-3xl--line-height))}}@media(width>=40rem){.sm\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading, var(--text-4xl--line-height))}}@media(width>=40rem){.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}}@media(width>=40rem){.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(width>=40rem){.sm\:leading-8{--tw-leading: calc(var(--spacing) * 8);line-height:calc(var(--spacing) * 8)}}@media(width>=48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=48rem){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(width>=64rem){.lg\:col-start-2{grid-column-start:2}}@media(width>=64rem){.lg\:row-span-2{grid-row:span 2 / span 2}}@media(width>=64rem){.lg\:row-start-2{grid-row-start:2}}@media(width>=64rem){.lg\:mx-0{margin-inline:calc(var(--spacing) * 0)}}@media(width>=64rem){.lg\:mt-16{margin-top:calc(var(--spacing) * 16)}}@media(width>=64rem){.lg\:mt-24{margin-top:calc(var(--spacing) * 24)}}@media(width>=64rem){.lg\:flex{display:flex}}@media(width>=64rem){.lg\:hidden{display:none}}@media(width>=64rem){.lg\:max-w-3xl{max-width:var(--container-3xl)}}@media(width>=64rem){.lg\:max-w-4xl{max-width:var(--container-4xl)}}@media(width>=64rem){.lg\:max-w-none{max-width:none}}@media(width>=64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=64rem){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(width>=64rem){.lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}}@media(width>=64rem){.lg\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}}@media(width>=64rem){.lg\:grid-cols-\[minmax\(0\,1\.45fr\)_minmax\(18rem\,0\.95fr\)\]{grid-template-columns:minmax(0,1.45fr) minmax(18rem,.95fr)}}@media(width>=64rem){.lg\:grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}}@media(width>=64rem){.lg\:items-start{align-items:flex-start}}@media(width>=64rem){.lg\:justify-end{justify-content:flex-end}}@media(width>=64rem){.lg\:gap-y-16{row-gap:calc(var(--spacing) * 16)}}@media(width>=64rem){.lg\:rounded-l-4xl{border-top-left-radius:var(--radius-4xl);border-bottom-left-radius:var(--radius-4xl)}}@media(width>=64rem){.lg\:rounded-l-\[calc\(2rem\+1px\)\]{border-top-left-radius:calc(2rem
28+ 1px);border-bottom-left-radius:calc(2rem + 1px)}}@media(width>=64rem){.lg\:rounded-r-4xl{border-top-right-radius:var(--radius-4xl);border-bottom-right-radius:var(--radius-4xl)}}@media(width>=64rem){.lg\:rounded-r-\[calc\(2rem\+1px\)\]{border-top-right-radius:calc(2rem + 1px);border-bottom-right-radius:calc(2rem + 1px)}}@media(width>=64rem){.lg\:rounded-tr-none{border-top-right-radius:0}}@media(width>=64rem){.lg\:rounded-bl-3xl{border-bottom-left-radius:var(--radius-3xl)}}@media(width>=64rem){.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}}@media(width>=64rem){.lg\:pt-10{padding-top:calc(var(--spacing) * 10)}}@media(width>=64rem){.lg\:pt-28{padding-top:calc(var(--spacing) * 28)}}@media(width>=64rem){.lg\:pt-36{padding-top:calc(var(--spacing) * 36)}}@media(width>=64rem){.lg\:pb-16{padding-bottom:calc(var(--spacing) * 16)}}@media(width>=64rem){.lg\:pb-20{padding-bottom:calc(var(--spacing) * 20)}}@media(width>=64rem){.lg\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading, var(--text-6xl--line-height))}}@media(width>=64rem){.lg\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}}@media(width>=80rem){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}:root{--safe-area-top: 0px;--safe-area-right: 0px;--safe-area-bottom: 0px;--safe-area-left: 0px;--app-header-height: calc(var(--safe-area-top) + 4.75rem)}@supports (top: env(safe-area-inset-top)){:root{--safe-area-top: env(safe-area-inset-top);--safe-area-right: env(safe-area-inset-right);--safe-area-bottom: env(safe-area-inset-bottom);--safe-area-left: env(safe-area-inset-left)}}html{min-height:100%;margin:0;scroll-behavior:smooth}body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font-manrope);overflow-x:hidden}h1,h2,h3,h4{font-family:var(--font-sora)}.container{margin-inline:auto;max-width:var(--container-site);padding-inline:calc(var(--spacing) * 4)}@property --tw-translate-x{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-rotate-x{syntax: "*"; inherits: false;}@property --tw-rotate-y{syntax: "*"; inherits: false;}@property --tw-rotate-z{syntax: "*"; inherits: false;}@property --tw-skew-x{syntax: "*"; inherits: false;}@property --tw-skew-y{syntax: "*"; inherits: false;}@property --tw-space-y-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: "*"; inherits: false;}@property --tw-font-weight{syntax: "*"; inherits: false;}@property --tw-tracking{syntax: "*"; inherits: false;}@property --tw-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: "*"; inherits: false;}@property --tw-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: "*"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: "*"; inherits: false;}@property --tw-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: "*"; inherits: false;}@property --tw-inset-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: "*"; inherits: false;}@property --tw-ring-offset-width{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: "*"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-blur{syntax: "*"; inherits: false;}@property --tw-brightness{syntax: "*"; inherits: false;}@property --tw-contrast{syntax: "*"; inherits: false;}@property --tw-grayscale{syntax: "*"; inherits: false;}@property --tw-hue-rotate{syntax: "*"; inherits: false;}@property --tw-invert{syntax: "*"; inherits: false;}@property --tw-opacity{syntax: "*"; inherits: false;}@property --tw-saturate{syntax: "*"; inherits: false;}@property --tw-sepia{syntax: "*"; inherits: false;}@property --tw-drop-shadow{syntax: "*"; inherits: false;}@property --tw-drop-shadow-color{syntax: "*"; inherits: false;}@property --tw-drop-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-drop-shadow-size{syntax: "*"; inherits: false;}@property --tw-backdrop-blur{syntax: "*"; inherits: false;}@property --tw-backdrop-brightness{syntax: "*"; inherits: false;}@property --tw-backdrop-contrast{syntax: "*"; inherits: false;}@property --tw-backdrop-grayscale{syntax: "*"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: "*"; inherits: false;}@property --tw-backdrop-invert{syntax: "*"; inherits: false;}@property --tw-backdrop-opacity{syntax: "*"; inherits: false;}@property --tw-backdrop-saturate{syntax: "*"; inherits: false;}@property --tw-backdrop-sepia{syntax: "*"; inherits: false;}@property --tw-duration{syntax: "*"; inherits: false;}@property --tw-ease{syntax: "*"; inherits: false;}@property --tw-content{syntax: "*"; initial-value: ""; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-rotate-x: initial;--tw-rotate-y: initial;--tw-rotate-z: initial;--tw-skew-x: initial;--tw-skew-y: initial;--tw-space-y-reverse: 0;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-blur: initial;--tw-brightness: initial;--tw-contrast: initial;--tw-grayscale: initial;--tw-hue-rotate: initial;--tw-invert: initial;--tw-opacity: initial;--tw-saturate: initial;--tw-sepia: initial;--tw-drop-shadow: initial;--tw-drop-shadow-color: initial;--tw-drop-shadow-alpha: 100%;--tw-drop-shadow-size: initial;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial;--tw-duration: initial;--tw-ease: initial;--tw-content: ""}}} 29</style><link rel="stylesheet" href="styles-HXWMQHD6.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-HXWMQHD6.css"></noscript>
vendor: 63 bytes, line 29
29<script async src="https://www.googletagmanager.com/gtag/js?id=
29G-F5JQVNERNL
vendor: 11 bytes, line 29
29"></script>
29<style ng-app-id="ng">[_nghost-ng-c1027794534]{display:block;min-height:100vh;min-height:100dvh;overflow-x:clip}</style><style ng-app-id="ng">html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start: var(--ngx-sonner-toast-icon-margin-start, -3px);--toast-icon-margin-end: var(--ngx-sonner-toast-icon-margin-end, 4px);--toast-svg-margin-start: var(--ngx-sonner-toast-svg-margin-start,-1px);--toast-svg-margin-end: var(--ngx-sonner-toast-svg-margin-end, 0px);--toast-button-margin-start: var(--ngx-sonner-toast-button-margin-start, auto);--toast-button-margin-end: var(--ngx-sonner-toast-button-margin-end, 0);--toast-close-button-start: var(--ngx-sonner-toast-close-button-start, 0);--toast-close-button-end: var(--ngx-sonner-toast-close-button-end, unset);--toast-close-button-transform: var(--ngx-sonner-toast-close-button-transform, translate(-35%, -35%))}html[dir=rtl],[data-sonner-toaster][dir=rtl]{--toast-icon-margin-start: var(--ngx-sonner-rtl-toast-icon-margin-start, 4px);--toast-icon-margin-end: var(--ngx-sonner-rtl-toast-icon-margin-end, -3px);--toast-svg-margin-start: var(--ngx-sonner-rtl-toast-svg-margin-start, 0px);--toast-svg-margin-end: var(--ngx-sonner-rtl-toast-svg-margin-end, -1px);--toast-button-margin-start: var(--ngx-sonner-rtl-toast-button-margin-start, 0);--toast-button-margin-end: var(--ngx-sonner-rtl-toast-button-margin-end, auto);--toast-close-button-start: var(--ngx-sonner-rtl-toast-close-button-start, unset);--toast-close-button-end: var(--ngx-sonner-rtl-toast-close-button-end, 0);--toast-close-button-transform: var(--ngx-sonner-rtl-toast-close-button-transform, translate(35%, -35%))}[data-sonner-toaster]{position:fixed;width:var(--width);font-family:var(--ngx-sonner-font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji);--gray1: hsl(0, 0%, 99%);--gray2: hsl(0, 0%, 97.3%);--gray3: hsl(0, 0%, 95.1%);--gray4: hsl(0, 0%, 93%);--gray5: hsl(0, 0%, 90.9%);--gray6: hsl(0, 0%, 88.7%);--gray7: hsl(0, 0%, 85.8%);--gray8: hsl(0, 0%, 78%);--gray9: hsl(0, 0%, 56.1%);--gray10: hsl(0, 0%, 52.3%);--gray11: hsl(0, 0%, 43.5%);--gray12: hsl(0, 0%, 9%);--border-radius: var(--ngx-sonner-border-radius, 8px);box-sizing:border-box;padding:0;margin:0;list-style:none;outline:none;z-index:999999999}[data-sonner-toaster][data-x-position=right]{right:max(var(--offset),env(safe-area-inset-right))}[data-sonner-toaster][data-x-position=left]{left:max(var(--offset),env(safe-area-inset-left))}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translate(-50%)}[data-sonner-toaster][data-y-position=top]{top:max(var(--offset),env(safe-area-inset-top))}[data-sonner-toaster][data-y-position=bottom]{bottom:max(var(--offset),env(safe-area-inset-bottom))}[data-sonner-toast]{--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);filter:blur(0);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:none;overflow-wrap:anywhere}[data-sonner-toast][data-styled=true]{padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px #0000001a;width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}[data-sonner-toast][data-y-position=top]{top:0;--y: translateY(-100%);--lift: 1;--lift-amount: calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y: translateY(100%);--lift: -1;--lift-amount: calc(var(--lift) * var(--gap))}[data-sonner-toast] [data-description]{font-weight:400;line-height:1.4;color:inherit}[data-sonner-toast] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}[data-sonner-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast] [data-icon]>*{flex-shrink:0}[data-sonner-toast] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast] [data-content]{display:flex;flex-direction:column;gap:2px}[data-sonner-toast] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;cursor:pointer;outline:none;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}[data-sonner-toast] [data-button]:focus-visible{box-shadow:var(--ngx-sonner-toast-focus-box-sha
29dow, 0 0 0 2px rgba(0, 0, 0, .4))}[data-sonner-toast] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast] [data-cancel]{color:var(--normal-text);background:#00000014}[data-sonner-toast][data-theme=dark] [data-cancel]{background:#ffffff4d}[data-sonner-toast] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--ngx-sonner-toast-close-button-background, var(--gray1));color:var(--ngx-sonner-toast-close-button-color, var(--gray12));border:var(--ngx-sonner-toast-close-button-border, 1px solid var(--gray4));transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast] [data-close-button]:focus-visible{box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}[data-sonner-toast] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast]:hover [data-close-button]:hover{background:var(--ngx-sonner-toast-close-button-hover-background, var(--gray2));color:var(--ngx-sonner-toast-close-button-hover-color, var(--gray12));border-color:var(--ngx-sonner-toast-close-button-hover-border-color, var(--gray5))}[data-sonner-toast][data-swiping=true]:before{content:"";position:absolute;left:0;right:0;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]:before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]:before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]:before{content:"";position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast]:after{content:"";position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y: translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>*{transition:opacity .4s}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}
29[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y: translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y: translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]:before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount, 0px));transition:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation:swipe-out .2s ease-out forwards}@keyframes swipe-out{0%{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));opacity:1}to{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));opacity:0}}@media (max-width: 600px){[data-sonner-toaster]{position:fixed;--mobile-offset: 16px;right:var(--mobile-offset);left:var(--mobile-offset);width:100%}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - 32px)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset)}[data-sonner-toaster][data-y-position=bottom]{bottom:20px}[data-sonner-toaster][data-y-position=top]{top:20px}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset);right:var(--mobile-offset);transform:none}}[data-sonner-toaster][data-theme=light]{--normal-bg: var(--ngx-sonner-toast-normal-background, #fff);--normal-border: var(--ngx-sonner-toast-normal-border-color, var(--gray4));--normal-text: var(--ngx-sonner-toast-normal-color, var(--gray12));--success-bg: var(--ngx-sonner-toast-success-background, hsl(143, 85%, 96%));--success-border: var(--ngx-sonner-toast-success-border, hsl(145, 92%, 91%));--success-text: var(--ngx-sonner-toast-success-color, hsl(140, 100%, 27%));--info-bg: var(--ngx-sonner-toast-info-background, hsl(208, 100%, 97%));--info-border: var(--ngx-sonner-toast-info-border, hsl(221, 91%, 91%));--info-text: var(--ngx-sonner-toast-info-color, hsl(210, 92%, 45%));--warning-bg: var(--ngx-sonner-toast-warning-background, hsl(49, 100%, 97%));--warning-border: var(--ngx-sonner-toast-warning-border, hsl(49, 91%, 91%));--warning-text: var(--ngx-sonner-toast-warning-color, hsl(31, 92%, 45%));--error-bg: var(--ngx-sonner-toast-error-background, hsl(359, 100%, 97%));--error-border: var(--ngx-sonner-toast-error-border, hsl(359, 100%, 94%));--error-text: var(--ngx-sonner-toast-error-color, hsl(360, 100%, 45%))}[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg: var(--ngx-sonner-toast-inverse-normal-background, #000);--normal-border: var(--ngx-sonner-toast-inverse-normal-border-color, hsl(0, 0%, 20%));--normal-text: var(--ngx-sonner-toast-inverse-normal-color, var(--gray1))}[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg: var(--ngx-sonner-toast-inverse-dark-normal-background, #fff);--normal-border: var(--ngx-sonner-toast-inverse-dark-normal-border-color, var(--gray3));--normal-text: var(--ngx-sonner-toast-inverse-dark-normal-color, var(--gray12))}[data-sonner-toaster][data-theme=dark]{--normal-bg: var(--ngx-sonner-toast-dark-normal-background, #000);--normal-border: var(--ngx-sonner-toast-dark-normal-border-color, hsl(0, 0%, 20%));--normal-text: var(--ngx-sonner-toast-dark-normal-color, var(--gray1));--success-bg: var(--ngx-sonner-toast-dark-success-background, hsl(150, 100%, 6%));--success-border: var(--ngx-sonner-toast-dark-success-border, hsl(147, 100%, 12%));--success-text: var(--ngx-sonner-toast-dark-success-color, hsl(150, 86%, 65%));--info-bg: var(--ngx-sonner-toast-dark-info-background, hsl(215, 100%, 6%));--info-border: var(--ngx-sonner-toast-dark-info-border, hsl(223, 100%, 12%));--info-text: var(--ngx-sonner-toast-dark-info-color, hsl(216, 87%, 65%));--warning-bg: var(--ngx-sonner-toast-dark-warning-background, hsl(64, 100%, 6%));--warning-border: var(--ngx-sonner-toast-dark-warning-border, hsl(60, 100%, 12%));--warning-text: var(--ngx-sonner-toast-dark-warning-color, hsl(46, 87%, 65%));--error-bg: var(--ngx-sonner-toast-dark-error-background, hsl(358, 76%, 10%));--error-border: var(--ngx-sonner-toast-dark-error-border, hsl(357, 89%, 16%));--error-text: var(--ngx-sonner-toast-dark-error-color, hsl(358,
29100%, 81%))}[data-rich-colors=true] [data-sonner-toast][data-type=success],[data-rich-colors=true] [data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true] [data-sonner-toast][data-type=info],[data-rich-colors=true] [data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true] [data-sonner-toast][data-type=warning],[data-rich-colors=true] [data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true] [data-sonner-toast][data-type=error],[data-rich-colors=true] [data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size: 16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:nth-child(1){animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}to{opacity:.15}}@media (prefers-reduced-motion){[data-sonner-toast],[data-sonner-toast]>*,.sonner-loading-bar{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)} 30</style><meta name="robots" content="index, follow"><meta name="twitter:image:alt" content="Tailfind logo and brand mark"><meta property="og:url" content="https://tailfind.org/"><meta property="og:locale" content="en_US"><meta property="og:image:alt" content="Tailfind logo and brand mark"><meta property="og:locale:alternate" content="de_DE" data-tailfind-locale="true"><meta property="og:locale:alternate" content="fr_FR" data-tailfind-locale="true"><meta property="og:locale:alternate" content="es_ES" data-tailfind-locale="true"><meta property="og:locale:alternate" content="es_LA" data-tailfind-locale="true"><meta property="og:locale:alternate" content="it_IT" data-tailfind-locale="true"><meta property="og:locale:alternate" content="pt_PT" data-tailfind-locale="true"><meta property="og:locale:alternate" content="pt_BR" data-tailfind-locale="true"><meta property="og:locale:alternate" content="nl_NL" data-tailfind-locale="true"><meta property="og:locale:alternate" content="sv_SE" data-tailfind-locale="true"><meta property="og:locale:alternate" content="no_NO" data-tailfind-locale="true"><meta property="og:locale:alternate" content="da_DK" data-tailfind-locale="true"><meta property="og:locale:alternate" content="fi_FI" data-tailfind-locale="true"><meta property="og:locale:alternate" content="pl_PL" data-tailfind-locale="true"><meta property="og:locale:alternate" content="ro_RO" data-tailfind-locale="true"><meta property="og:locale:alternate" content="tr_TR" data-tailfind-locale="true"><meta property="og:locale:alternate" content="ru_RU" data-tailfind-locale="true"><meta property="og:locale:alternate" content="uk_UA" data-tailfind-locale="true"><meta property="og:locale:alternate" content="ja_JP" data-tailfind-locale="true"><meta property="og:locale:alternate" content="ko_KR" data-tailfind-locale="true"><meta property="og:locale:alternate" content="zh_TW" data-tailfind-locale="true"><meta property="og:locale:alternate" content="zh_CN" data-tailfind-locale="true"><meta property="og:locale:alternate" content="hi_IN" data-tailfind-locale="true"><meta property="og:locale:alternate" content="id_ID" data-tailfind-locale="true"><meta property="og:locale:alternate" content="vi_VN" data-tailfind-locale="true"><meta property="og:locale:alternate" content="th_TH" data-tailfind-locale="true"><meta property="og:locale:alternate" content="ar_AR" data-tailfind-locale="true"><meta property="og:locale:alternate" content="cs_CZ" data-tailfind-locale="true"><meta property="og:locale:alternate" content="he_IL" data-tailfind-locale="true"><meta property="og:locale:alternate" content="el_GR" data-tailfind-locale="true"><meta property="og:locale:alternate" content="hu_HU" data-tailfind-locale="true"><link rel="canonical" href="https://tailfind.org/"><link rel="alternate" hreflang="en" href="https://tailfind.org/" data-tailfind-locale="true"><link rel="alternate" hreflang="de" href="https://tailfind.org/de" data-tailfind-locale="true"><link rel="alternate" hreflang="fr" href="https://tailfind.org/fr" data-tailfind-locale="true"><link rel="alternate" hreflang="es-ES" href="https://tailfind.org/es" data-tailfind-locale="true"><link rel="alternate" hreflang="es-419" href="https://tailfind.org/es-419" data-tailfind-locale="true"><link rel="alternate" hreflang="it" href="https://tailfind.org/it" data-tailfind-locale="true"><link rel="alternate" hreflang="pt-PT" href="https://tailfind.org/pt" data-tailfind-locale="true"><link rel="alternate" hreflang="pt-BR" href="https://tailfind.org/pt-br" data-tailfind-locale="true"><link rel="alternate" hreflang="nl" href="https://tailfind.org/nl" data-tailfind-locale="true"><link rel="alternate" hreflang="sv" href="https://tailfind.org/sv" data-tailfind-locale="true"><link rel="alternate" hreflang="no" href="https://tailfind.org/no" data-tailfind-locale="true"><link rel="alternate" hreflang="da" href="https://tailfind.org/da" data-tailfind-locale="true"><link rel="alternate" hreflang="fi" href="https://tailfind.org/fi" data-tailfind-locale="true"><link rel="alternate" hreflang="pl" href="https://tailfind.org/pl" data-tailfind-locale="true"><link rel="alternate" hreflang="ro" href="https://tailfind.org/ro" data-tailfind-locale="true"><link rel="alternate" hreflang="tr" href="https://tailfind.org/tr" data-tailfind-locale="true"><link rel="alternate" hreflang="ru" href="https://tailfind.org/ru" data-tailfind-locale="true"><link rel="alternate" hreflang="uk" href="https://tailfind.org/uk" data-tailfind-locale="true"><link rel="alternate" hreflang="ja" href="https://tailfind.org/ja" data-tailfind-locale="true"><link rel="alternate" hreflang="ko" href="https://tailfind.org/ko" data-tailfind-locale="true"><link rel="alternate" hreflang="zh-TW" href="https://tailfind.org/zh" data-tailfind-locale="true"><link rel="alternate" hreflang="zh-CN" href="https://tailfind.org/zh-cn" data-tailfind-locale="true"><link rel="alternate" hreflang="hi" href="https://tailfind.org/hi" data-tailfind-locale="true"><link rel="alternate" hreflang="id" href="https://tailfind.org/id" data-tailfind-locale="true"><link rel="alternate" hreflang="vi" href="https://tailfind.org/vi" data-tailfind-locale="true"><link rel="alternate" hreflang="th" href="https://tailfind.org/th" data-tailfind-locale="true"><link rel="alternate" hreflang="ar" href="https://tailfind.org/ar" data-tailfind-locale="true"><link rel="alternate" hreflang="cs" href="https://tailfind.org/cs" data-tailfind-locale="true"><link rel="alternate" hreflang="he" href="https://tailfind.org/he" data-tailfind-locale="true"><link rel="alternate" hreflang="el" href="https://tailfind.org/el" data-tailfind-locale="true"><link rel="alternate" hreflang="hu" href="https://tailfind.org/hu" data-tailfind-locale="true"><link rel="alternate" hreflang="x-default" href="https://tailfind.org/" data-tailfind-locale="true">
30<script type="application/ld+json" data-tailfind-structured-data="true">{"@context":"https://schema.org","@type":"WebSite","name":"Tailfind","url":"https://tailfind.org/","inLanguage":"en"}</script>
30<script type="application/ld+json" data-tailfind-structured-data="true">{"@context":"https://schema.org","@type":"Organization","name":"Tailfind","url":"https://tailfind.org/","logo":"https://tailfind.org/favicon-512.png","inLanguage":"en"}</script>
30<script type="application/ld+json" data-tailfind-structured-data="true">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Tailfind","alternateName":"Tailfind Chrome Extension","applicationCategory":"DeveloperApplication","applicationSubCategory":"Browser Extension","operatingSystem":"Google Chrome","browserRequirements":"Requires Google Chrome","description":"Tailfind is a Chrome extension for converting live page, capturing selected UI, and exporting clean Tailwind CSS.","keywords":"Tailfind, Tailwind CSS, Tailwind browser extension, Chrome extension for Tailwind, convert web page HTML, convert HTML to Tailwind CSS, export Tailwind CSS, Tailwind Play workflow, frontend developer tool, web page converter","featureList":["Select the exact fragment","Export plain Tailwind output","Start capture from the extension popover","Supports any codebase","Combines all styles","Tailwind to Tailwind","Supports SVG","Removes redundant noise","Understands obfuscated markup"],"offers":{"@type":"Offer","price":24,"priceCurrency":"USD","url":"https://chromewebstore.google.com/detail/tailfind/famibopnbenoegknengohifmnjnkhohh"},"inLanguage":"en","url":"https://tailfind.org/"}</script>
30</head> 31<body><!--nghm-->
31<script type="text/javascript" id="ng-event-dispatch-contract">(()=>{function p(t,n,r,o,e,i,f,m){return{eventType:t,event:n,targetElement:r,eic:o,timeStamp:e,eia:i,eirp:f,eiack:m}}function u(t){let n=[],r=e=>{n.push(e)};return{c:t,q:n,et:[],etc:[],d:r,h:e=>{r(p(e.type,e,e.target,t,Date.now()))}}}function s(t,n,r){for(let o=0;o<n.length;o++){let e=n[o];(r?t.etc:t.et).push(e),t.c.addEventListener(e,t.h,r)}}function c(t,n,r,o,e=window){let i=u(t);e._ejsas||(e._ejsas={}),e._ejsas[n]=i,s(i,r),s(i,o,!0)}window.__jsaction_bootstrap=c;})(); 32</script>
32<script>window.__jsaction_bootstrap(document.body,"ng",["click"],[]);</script>
32 33<app-root ng-version="21.2.9" class="block" _nghost-ng-c1027794534 ngh="11" ng-server-context="ssg"><app-header _ngcontent-ng-c1027794534 ngh="2"><header class="fixed inset-x-0 top-0 z-50 overflow-x-clip pt-[var(--safe-area-top)] pl-[var(--safe-area-left)] pr-[var(--safe-area-right)]"><div class="absolute inset-0 border-b border-white/10 bg-slate-950/40 backdrop-blur-md"></div><nav class="container relative flex items-center gap-4 py-4"><div class="flex min-w-0 flex-1 basis-0"><a class="shrink-0" aria-label="Tailfind home" href="/" jsaction="click:;"><img alt="Tailfind" height="582" src="/brand/tailfind-logo-dark.svg" width="2234" class="h-8 w-auto sm:h-9"></a></div><div class="hidden items-center gap-10 lg:flex"><div class="group relative"><a class="flex items-center gap-1 text-sm font-semibold leading-6 text-white/85 transition-colors duration-200 hover:text-white focus-visible:text-white focus-visible:outline-none" href="/#overview" jsaction="click:;"> Product <svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5 flex-none text-slate-500 transition duration-200 group-hover:rotate-180"><path clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill-rule="evenodd"/></svg></a><div class="invisible pointer-events-none absolute left-1/2 top-full z-50 w-screen max-w-xs -translate-x-1/2 pt-2 opacity-0 transition duration-150 group-hover:visible group-hover:pointer-events-auto group-hover:opacity-100"><div class="overflow-hidden rounded-2xl border border-white/10 bg-slate-950/95 p-2 shadow-2xl shadow-black/40 backdrop-blur-xl"><a class="block rounded-xl px-3 py-2.5 text-sm leading-5 transition duration-150 hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/#overview" jsaction="click:;"><span class="block font-semibold text-slate-50">Overview</span><span class="mt-0.5 block text-xs font-medium leading-5 text-slate-400"> Capture UI and export Tailwind CSS. </span></a><a class="block rounded-xl px-3 py-2.5 text-sm leading-5 transition duration-150 hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/#features" jsaction="click:;"><span class="block font-semibold text-slate-50">Features</span><span class="mt-0.5 block text-xs font-medium leading-5 text-slate-400"> Selection, conversion, and Play export. </span></a><a class="block rounded-xl px-3 py-2.5 text-sm leading-5 transition duration-150 hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/#use-cases" jsaction="click:;"><span class="block font-semibold text-slate-50">Use Cases</span><span class="mt-0.5 block text-xs font-medium leading-5 text-slate-400"> Migration, QA, and rebuild workflows. </span></a><a class="block rounded-xl px-3 py-2.5 text-sm leading-5 transition duration-150 hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/#pricing" jsaction="click:;"><span class="block font-semibold text-slate-50">Pricing</span><span class="mt-0.5 block text-xs font-medium leading-5 text-slate-400"> Trial access and lifetime license. </span></a><a class="block rounded-xl px-3 py-2.5 text-sm leading-5 transition duration-150 hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/#faq" jsaction="click:;"><span class="block font-semibold text-slate-50">FAQ</span><span class="mt-0.5 block text-xs font-medium leading-5 text-slate-400"> Copying, support, and refunds. </span></a><!----></div></div></div><div class="group relative"><a class="flex items-center gap-1 text-sm font-semibold leading-6 text-white/85 transition-colors duration-200 hover:text-white focus-visible:text-white focus-visible:outline-none" href="/html-css-to-tailwind" jsaction="click:;"> Converters <svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5 flex-none text-slate-500 transition duration-200 group-hover:rotate-180"><path clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill-rule="evenodd"/></svg></a><div class="invisible pointer-events-none absolute left-1/2 top-full z-50 w-screen max-w-xs -translate-x-1/2 pt-2 opacity-0 transition duration-150 group-hover:visible group-hover:pointer-events-auto group-hover:opacity-100"><div class="overflow-hidden rounded-2xl border border-white/10 bg-slate-950/95 p-2 shadow-2xl shadow-black/40 backdrop-blur-xl"><a class="block rounded-xl px-3 py-2.5 text-sm leading-5 transition duration-150 hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/html-css-to-tailwind" jsaction="click:;"><span class="block font-semibold text-slate-50">HTML/CSS to Tailwind</span><span class="mt-0.5 block text-xs font-medium leading-5 text-slate-400"> Markup and CSS to Tailwind CSS. </span></a><a class="block rounded-xl px-3 py-2.5 text-sm leading-5 transition duration-150 hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/css-to-tailwind" jsaction="click:;"><span class="block font-semibold text-slate-50">CSS to Tailwind</span><span class="mt-0.5 block text-xs font-medium leading-5 text-slate-400"> CSS declarations to Tailwind classes. </span></a><a class="block rounded-xl px-3 py-2.5 text-sm leading-5 transition duration-150 hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/bootstrap-to-tailwind" jsaction="click:;"><span class="block font-semibold text-slate-50">Bootstrap to Tailwind</span><span class="mt-0.5 block text-xs font-medium leading-5 text-slate-400"> Bootstrap fragments to Tailwind CSS. </span></a><!----></div></div></div><!----></div><div class="hidden flex-1 basis-0 items-center justify-end gap-2 lg:flex">
33<app-try-button hidden data-tailfind-demo-control="true" ngh="0"><button type="button" class="bg-[rgba(15,23,42,0.88)] border border-[rgba(96,165,250,0.22)] cursor-pointer duration-200 focus-visible:outline-2 focus-visible:outline-blue-400 focus-visible:outline-offset-2 font-bold gap-2 hover:bg-[rgba(30,64,175,0.22)] hover:border-[rgba(96,165,250,0.34)] inline-flex items-center justify-center leading-5 px-5 py-2.5 rounded-[14px] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] text-blue-100 text-sm transition" aria-pressed="false" jsaction="click:;"><img alt aria-hidden="true" src="/brand/tailfind-mark-dark.svg" class="h-5 w-5"> Try Tailfind 34</button></app-try-button><app-buy-button class="flex items-center justify-center" ngh="1"><button type="button" class="antialiased bg-[linear-gradient(180deg,#3b82f6,#2563eb)] cursor-pointer disabled:cursor-wait disabled:opacity-75 font-bold hover:brightness-110 inline-flex items-center justify-center leading-5 px-5 py-2.5 rounded-[14px] shadow-sm text-sm text-white transition" jsaction="click:;"><!----> Buy it now <!--ngtns--> - 24$ <!----><!----></button></app-buy-button></div><div class="flex flex-1 basis-0 justify-end lg:hidden"><button aria-controls="app-navigation-drawer" type="button" class="relative inline-flex h-11 w-11 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white shadow-sm transition-colors duration-200 hover:border-white/20 hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60" aria-expanded="false" aria-label="Toggle navigation menu" jsaction="click:;"><!----><svg aria-hidden="true" fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"><path d="M4 6H16M4 10H16M4 14H16" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"/></svg><!----></button></div></nav></header></app-header><div _ngcontent-ng-c1027794534 class="min-h-dvh bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.18),transparent_28%),linear-gradient(180deg,rgba(17,24,39,0.98),rgba(15,23,42,0.98))] backdrop-blur-[18px]"><router-outlet _ngcontent-ng-c1027794534></router-outlet><app-home-page ngh="0"><app-home-overview ngh="0"><section id="overview" class="relative"><div class="pt-24 pb-12 sm:pb-14 lg:pt-36 lg:pb-16"><div class="container my-0 mx-auto"><div class="my-0 pb-8 mx-auto max-w-4xl text-center"><div class="flex justify-center"><app-chrome-extension-button ngh="0"><a rel="noopener noreferrer" target="_blank" class="inline-flex items-center gap-2 rounded-full border border-white/12 bg-white/[0.06] px-3 py-1.5 text-xs font-semibold leading-5 text-slate-100 antialiased shadow-sm backdrop-blur transition hover:border-white/18 hover:bg-white/[0.1] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300/70 sm:gap-3 sm:px-4 sm:py-2 sm:text-sm" href="https://chromewebstore.google.com/detail/tailfind/famibopnbenoegknengohifmnjnkhohh"><img alt aria-hidden="true" height="20" src="/brand/google-chrome-icon.svg" width="20" class="h-4 w-4 shrink-0 sm:h-5 sm:w-5"><span>Extension for Google Chrome</span></a></app-chrome-extension-button></div><div class="mx-auto mt-6 max-w-lg"><p class="text-center text-xs font-semibold uppercase leading-5 tracking-[0.22em] text-slate-400 antialiased"> Copy & paste into your framework </p><div class="mt-4 flex flex-wrap items-center justify-center gap-3 sm:gap-6"><figure class="flex items-center justify-center"><img alt="Angular" height="32" src="/frameworks/angular.svg" width="32" class="block size-8 object-contain"></figure><figure class="flex items-center justify-center"><img alt="React" height="32" src="/frameworks/react.svg" width="32" class="block size-8 object-contain"></figure><figure class="flex items-center justify-center"><img alt="Vue" height="32" src="/frameworks/vue.svg" width="32" class="block size-8 object-contain"></figure><figure class="flex items-center justify-center"><img alt="Svelte" height="32" src="/frameworks/svelte.svg" width="32" class="block size-8 object-contain"></figure><figure class="flex items-center justify-center"><img alt="Next.js" height="32" src="/frameworks/next.svg" width="32" class="block size-8 object-contain"></figure><figure class="flex items-center justify-center"><img alt="Astro" height="32" src="/frameworks/astro.svg" width="32" class="block size-8 object-contain"></figure><figure class="flex items-center justify-center"><img alt="Nuxt" height="32" src="/frameworks/nuxt.svg" width="32" class="block size-8 object-contain"></figure></div></div><h1 class="mt-6 text-3xl font-semibold leading-tight tracking-tight text-balance text-white sm:text-4xl lg:text-6xl"><span class="text-blue-300">Convert live page</span><br> into Tailwind CSS </h1><p class="mx-auto mt-5 max-w-3xl text-base font-medium leading-7 text-pretty text-gray-400 antialiased sm:text-lg sm:leading-8 lg:text-xl"> Google Chrome extension that helps you convert a real page, capture the right fragment, and keep moving with Tailwind CSS instead of rebuilding the whole component from scratch. </p><div class="mt-8 flex flex-wrap items-start justify-center gap-3 sm:mt-10 sm:gap-4">
34<app-try-button hidden data-tailfind-demo-control="true" ngh="0"><button type="button" class="bg-[rgba(15,23,42,0.88)] border border-[rgba(96,165,250,0.22)] cursor-pointer duration-200 focus-visible:outline-2 focus-visible:outline-blue-400 focus-visible:outline-offset-2 font-bold gap-2 hover:bg-[rgba(30,64,175,0.22)] hover:border-[rgba(96,165,250,0.34)] inline-flex items-center justify-center leading-5 px-7 py-3 rounded-[14px] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] text-blue-100 text-md transition" aria-pressed="false" jsaction="click:;"><img alt aria-hidden="true" src="/brand/tailfind-mark-dark.svg" class="h-5 w-5"> Try Tailfind 35</button></app-try-button><app-trial-button class="inline-flex items-center justify-center" ngh="0"><a rel="noopener noreferrer" target="_blank" class="inline-flex min-h-11 cursor-pointer items-center justify-center gap-2 rounded-[14px] border border-[rgba(96,165,250,0.22)] bg-[rgba(15,23,42,0.88)] px-7 py-3 text-md font-bold leading-5 text-blue-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition duration-200 hover:border-[rgba(96,165,250,0.34)] hover:bg-[rgba(30,64,175,0.22)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400" href="https://chromewebstore.google.com/detail/tailfind/famibopnbenoegknengohifmnjnkhohh"><img alt aria-hidden="true" src="/brand/google-chrome-icon.svg" class="h-5 w-5"> Download 36</a></app-trial-button><div class="flex flex-col items-center gap-1.5 sm:gap-2"><app-buy-button class="flex items-center justify-center" ngh="1"><button type="button" class="antialiased bg-[linear-gradient(180deg,#3b82f6,#2563eb)
36] cursor-pointer disabled:cursor-wait disabled:opacity-75 font-bold hover:brightness-110 inline-flex items-center justify-center leading-5 px-7 py-3 rounded-[14px] shadow-sm text-md text-white transition" jsaction="click:;"><!----> Buy it now <!--ngtns--> - 24$ <!----><!----></button></app-buy-button><span class="text-[11px] font-semibold leading-4 tracking-[0.18em] text-blue-100/70 antialiased"> Lifetime Access </span></div></div></div><div class="mt-8 sm:mt-12 lg:mt-16"><div class="-m-2 aspect-video overflow-hidden rounded-xl bg-white/[0.024] p-2 shadow-sm sm:-m-4 sm:rounded-2xl sm:p-4"><video autoplay loop muted playsinline poster="/screenshots/demo-poster.jpg" preload="auto" src="/screenshots/demo.mp4" webkit-playsinline class="h-full w-full max-w-full rounded-md bg-white/5 object-cover shadow-sm"></video></div></div></div></div></section></app-home-overview><app-home-features class="block" ngh="0"><section id="features" class="relative"><app-background-squares ngh="0"><div class="absolute inset-0 pointer-events-none border-b border-t border-white/5 mask-[linear-gradient(180deg,transparent_0%,black_0%,black_100%,transparent_100%)]"><div class="absolute inset-x-0 top-0 h-136 bg-[radial-gradient(circle_at_top,rgba(6,182,212,0.18),transparent_48%)]"></div><div class="absolute inset-0 bg-[linear-gradient(180deg,rgba(4,13,24,0.74),rgba(4,13,24,0.88)_32%,rgba(2,8,23,0.98)_100%)]"></div><div class="absolute inset-x-0 bottom-0 top-0 bg-[linear-gradient(90deg,rgba(148,163,184,0.04)_1px,transparent_1px)] bg-size-[68px_100%]"></div><div class="absolute inset-x-0 bottom-0 top-0 bg-[linear-gradient(180deg,rgba(148,163,184,0.032)_1px,transparent_1px)] bg-size-[100%_68px]"></div></div></app-background-squares><app-gradient-glows ngh="3"><div aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden"><div class="absolute rounded-full" style="background: radial-gradient(circle, rgba(125,211,252,0.14), rgba(37,99,235,0.08) 38%, transparent 72%); filter: blur(3.717656131397269rem); height: 18.708851169474944rem; left: 70.20567796452048%; opacity: 0.9341308590542272; top: 35.02242544077514rem; transform: translateX(-50%); width: 36.69485906373761rem;"></div><div class="absolute rounded-full" style="background: radial-gradient(circle, rgba(14,165,233,0.13), rgba(96,165,250,0.08) 42%, transparent 74%); filter: blur(2.9792288631675894rem); height: 27.349298332458197rem; left: 70.20298588925526%; opacity: 0.9038181386386144; top: 53.46716562948389rem; transform: translateX(-50%); width: 32.579734229451965rem;"></div><!----></div></app-gradient-glows><div class="pt-24 pb-12 lg:pt-28 lg:pb-16 relative"><div class="mx-auto container"><h4 class="text-center text-xl font-semibold text-blue-300"> Why use Tailfind? </h4><h2 class="mx-auto mt-2 max-w-2xl text-center text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"> Improve your interface development flow </h2><div class="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2"><div class="relative lg:row-span-2"><div class="absolute inset-px rounded-lg bg-gray-800 lg:rounded-l-4xl"></div><div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]"><div class="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0"><p class="text-lg font-medium tracking-tight text-white max-lg:text-center font-sora"> Useful popover keeps interaction attached to the selected element </p><p class="mt-2 text-base/7 text-gray-400 max-lg:text-center"> The inline popover keeps key actions close, letting you refine selection and export the right fragment faster. The same actions are available as keyboard shortcuts, so you can keep moving without leaving the selection flow. </p></div><div class="relative w-full grow flex justify-center items-end p-5"><div class="rounded-xl overflow-hidden border-gray-700 bg-gray-900 outline outline-white/20 max-w-lg"><img alt src="/screenshots/selected-block.png" class="size-full object-cover object-top"></div></div></div><div class="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 lg:rounded-l-4xl"></div></div><div class="relative max-lg:row-start-1"><div class="absolute inset-px rounded-lg bg-gray-800 max-lg:rounded-t-4xl"></div><div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]"><div class="px-8 pt-8 sm:px-10 sm:pt-10"><p class="text-lg font-medium tracking-tight text-white max-lg:text-center font-sora"> Select the exact fragment </p><p class="mt-2 text-base/7 text-gray-400 max-lg:text-center">
36 Navigate the web page until the capture matches the boundary you actually want to reuse. </p></div><div class="flex flex-1 items-end justify-center p-5"><img alt src="/screenshots/hovered-block.png" class="w-full max-w-lg outline outline-white/15 rounded-xl"></div></div><div class="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-t-4xl"></div></div><div class="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2"><div class="absolute inset-px rounded-lg bg-gray-800"></div><div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]"><div class="px-8 pt-8 sm:px-10 sm:pt-10"><p class="text-lg font-medium tracking-tight text-white max-lg:text-center font-sora"> Export plain Tailwind output </p><p class="mt-2 text-base/7 text-gray-400 max-lg:text-center"> Tailfind turns the selected fragment into readable Tailwind CSS you can refine instead of rebuilding from scratch. </p></div><div class="flex flex-1 items-end justify-center p-5"><img alt src="/screenshots/generated-tailwind.png" class="w-full max-w-lg outline outline-white/15 rounded-xl"></div></div><div class="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15"></div></div><div class="relative lg:row-span-2"><div class="absolute inset-px rounded-lg bg-gray-800 max-lg:rounded-b-4xl lg:rounded-r-4xl"></div><div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]"><div class="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0"><p class="text-lg font-medium tracking-tight text-white max-lg:text-center font-sora"> Start capture from the extension popover </p><p class="mt-2 max-w-lg text-base/7 text-gray-400 max-lg:text-center"> Pick an element to inspect, copy the whole page body, and configure the extension to match your workflow. </p></div><div class="relative w-full grow flex justify-center items-end p-5"><div class="rounded-xl overflow-hidden border-gray-700 bg-gray-900 outline outline-white/20 max-w-lg"><img alt src="/screenshots/extension-popover.png" class="size-full object-cover object-top"></div></div></div><div class="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-b-4xl lg:rounded-r-4xl"></div></div></div></div></div><div class="pt-8 pb-16 lg:pt-10 lg:pb-20 relative"><div class="mx-auto container"><div class="max-w-3xl sm:pl-8"><h4 class="text-blue-300 text-xl font-semibold leading-7"> AI learned algorithm </h4><h3 class="mt-2 text-white text-3xl sm:text-3xl font-semibold tracking-[-1.2px] leading-12 text-pretty"> Handles complex UI elements </h3></div><dl class="mt-16 grid gap-x-12 gap-y-10 md:grid-cols-2 xl:grid-cols-3"><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-9 fill-current"><path d="M8.50226 5.38707C8.81015 5.10997 8.8351 4.63576 8.55801 4.32787C8.28092 4.01999 7.8067 3.99503 7.49882 4.27213L5.76133 5.83587C5.02499 6.49853 4.41418 7.04822 3.99477 7.54679C3.55374 8.07104 3.24023 8.6343 3.24023 9.3296C3.24023 10.0249 3.55374 10.5882 3.99477 11.1124C4.41418 11.611 5.02498 12.1607 5.76132 12.8233L7.49882 14.3871C7.8067 14.6642 8.28092 14.6392 8.55801 14.3313C8.8351 14.0234 8.81015 13.5492 8.50226 13.2721L6.80579 11.7453C6.01792 11.0362 5.48672 10.5558 5.14262 10.1468C4.81237 9.7542 4.74023 9.52502 4.74023 9.3296C4.74023 9.13417 4.81237 8.90499 5.
3614262 8.51241C5.48672 8.10338 6.01792 7.62298 6.80579 6.91389L8.50226 5.38707Z" fill="currentColor"/><path d="M15.443 10.4983C15.7201 10.1904 16.1943 10.1654 16.5022 10.4425L18.2397 12.0063C18.976 12.6689 19.5868 13.2186 20.0063 13.7172C20.4473 14.2415 20.7608 14.8047 20.7608 15.5C20.7608 16.1953 20.4473 16.7586 20.0063 17.2828C19.5868 17.7814 18.976 18.3311 18.2397 18.9937L16.5022 20.5575C16.1943 20.8346 15.7201 20.8096 15.443 20.5017C15.1659 20.1938 15.1909 19.7196 15.4988 19.4425L17.1952 17.9157C17.9831 17.2066 18.5143 16.7262 18.8584 16.3172C19.1887 15.9246 19.2608 15.6954 19.2608 15.5C19.2608 15.3046 19.1887 15.0754 18.8584 14.6828C18.5143 14.2738 17.9831 13.7934 17.1952 13.0843L15.4988 11.5575C15.1909 11.2804 15.1659 10.8062 15.443 10.4983Z" fill="currentColor"/><path d="M14.1797 4.27511C14.58 4.38151 14.8182 4.79228 14.7118 5.19259L10.725 20.1926C10.6186 20.5929 10.2078 20.8312 9.80753 20.7248C9.40722 20.6184 9.16895 20.2076 9.27535 19.8073L13.2622 4.80729C13.3686 4.40697 13.7793 4.16871 14.1797 4.27511Z" fill="currentColor" opacity="0.5"/></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Supports any codebase </dt><dd class="mt-2 text-base/7 text-gray-400"> Works across legacy frontends, modern component apps, and mixed production stacks without requiring a specific framework or styling setup. </dd></div></div><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-8 fill-current"><path d="M16.77 21.78c-.41 0-.75-.34-.75-.75 0-1.35-1.1-2.45-2.45-2.45-.41 0-.75-.34-.75-.75s.34-.75.75-.75c1.35 0 2.45-1.1 2.45-2.45 0-.41.34-.75.75-.75s.75.34.75.75c0 1.35 1.1 2.45 2.45 2.45.41 0 .75.34.75.75s-.34.75-.75.75c-1.35 0-2.45 1.1-2.45 2.45 0 .41-.34.75-.75.75zm-.89-3.95c.34.25.64.55.89.89.25-.34.55-.64.89-.89-.34-.25-.64-.55-.89-.89-.25.34-.55.64-.89.89zM20.11 6.56c-.41 0-.75-.34-.75-.75 0-.62-.51-1.13-1.13-1.13-.41 0-.75-.34-.75-.75s.34-.75.75-.75c.62 0 1.13-.51 1.13-1.13 0-.41.34-.75.75-.75s.75.34.75.75c0 .62.51 1.13 1.13 1.13.41 0 .75.34.75.75s-.34.75-.75.75c-.62 0-1.13.51-1.13 1.13 0 .41-.34.75-.75.75zm-.04-2.63.04.04.04-.04-.04-.04-.04.04zM5.97 11.28c-.41 0-.75-.34-.75-.75 0-1.79-1.46-3.25-3.25-3.25-.41 0-.75-.34-.75-.75s.34-.75.75-.75c1.79 0 3.25-1.46 3.25-3.25 0-.41.34-.75.75-.75s.75.34.75.75c0 1.79 1.46 3.25 3.25 3.25.41 0 .75.34.75.75s-.34.75-.75.75c-1.79 0-3.25 1.46-3.25 3.25 0 .41-.34.75-.75.75zM4.53 6.53c.58.37 1.07.86 1.44 1.44.37-.58.86-1.07 1.44-1.44a4.71 4.71 0 0 1-1.44-1.44 4.71 4.71 0 0 1-1.44 1.44zM3.9 22.74c-.51 0-1.03-.2-1.42-.59l-.6-.6c-.75-.75-.79-1.97-.07-2.76L13.54 5.76c.45-.5 1.08-.79 1.76-.81.68 0 1.32.24 1.8.72l1.27 1.28c.48.48.74 1.12.72 1.8-.02.67-.31 1.31-.81 1.76L5.25 22.24c-.38.34-.86.52-1.34.52zM15.36 6.45h-.03c-.26 0-.51.12-.68.31L2.93 19.79c-.18.2-.17.51.02.7l.6.6c.19.19.5.2.7.02L17.28 9.38c.2-.18.31-.42.32-.68 0-.26-.09-.51-.28-.7l-1.27-1.28a.947.947 0 0 0-.67-.28z"/><path d="M14.29 13.82c-.19 0-.38-.07-.53-.22l-3.33-3.33c-.29-.29-.29-.77 0-1.06s.77-.29 1.06 0l3.33 3.33c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22zM19.63 12.57c0 .36-.29.64-.64.64s-.64-.29-.64-.64.29-.64.64-.64.64.29.64.64z"/><circle cx="11.4" cy="4.03" r=".64"/><path d="M21.45 9.67c-.3 0-.59-.19-.7-.49-.14-.39.05-.82.44-.96l.58-.21c.39-.14.82.05.96.44s-.05.82-.44.96l-.58.21c-.09.03-.17.05-.26.05zM15.12 3.34c-.09 0-.17-.02-.26-.05a.74.74 0 0 1-.44-.96l.21-.58c.14-.39.57-.59.96-.44.39.14.59.58.44.96l-.21.58c-.11.3-.4.49-.7.49z"/></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Combines all styles </dt><dd class="mt-2 text-base/7 text-gray-400"> Reads authored classes and inline declarations together instead of treating them separately. </dd></div></div><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg fill="none" viewBox="0 0 54 33" xmlns="http://www.w3.org/2000/svg" class="size-8">
36<path clip-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" fill="#38bdf8" fill-rule="evenodd"/></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Tailwind to Tailwind </dt><dd class="mt-2 text-base/7 text-gray-400"> When the source already uses Tailwind, the output stays Tailwind-native and easier to refine. </dd></div></div><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg height="512" version="1.1" viewBox="0 0 550.801 550.801" width="512" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0" class="size-8 fill-current"><g><path d="M488.426 197.019H475.2v-63.816c0-.398-.063-.799-.116-1.202-.021-2.534-.827-5.023-2.562-6.995L366.325 3.694c-.032-.031-.063-.042-.085-.076-.633-.707-1.371-1.295-2.151-1.804a9.495 9.495 0 0 0-.706-.419 11.131 11.131 0 0 0-2.131-.896c-.2-.056-.38-.138-.58-.19A10.774 10.774 0 0 0 358.193 0H97.2C85.282 0 75.6 9.693 75.6 21.601v175.413H62.377c-17.049 0-30.873 13.818-30.873 30.873v160.545c0 17.043 13.824 30.87 30.873 30.87h13.224V529.2c0 11.907 9.682 21.601 21.6 21.601h356.4c11.907 0 21.6-9.693 21.6-21.601V419.302h13.226c17.044 0 30.871-13.827 30.871-30.87v-160.54c-.001-17.054-13.828-30.873-30.872-30.873zM97.2 21.605h250.193v110.513c0 5.967 4.841 10.8 10.8 10.8H453.6v54.108H97.2V21.605zm241.671 204.067L284.545 386.96h-42.591l-51.69-161.288h39.967l19.617 68.196c5.508 19.143 10.531 37.567 14.36 57.67h.717c4.061-19.385 9.089-38.527 14.592-56.953l20.585-68.918h38.77v.005zM68.458 379.54l7.415-30.153c9.811 5.021 24.888 10.051 40.439 10.051 16.751 0 25.607-6.935 25.607-17.465 0-10.052-7.662-15.795-27.05-22.734-26.8-9.328-44.263-24.168-44.263-47.611 0-27.524 22.971-48.579 61.014-48.579 18.188 0 31.591 3.823 41.159 8.131l-8.126 29.437c-6.465-3.116-17.945-7.657-33.745-7.657-15.791 0-23.454 7.183-23.454 15.552 0 10.296 9.089 14.842 29.917 22.731 28.468 10.536 41.871 25.365 41.871 48.094 0 27.042-20.812 50.013-65.09 50.013-18.421-.001-36.614-4.779-45.694-9.81zm385.143 143.813H97.2V419.302h356.4v104.051zm35.31-143.813c-11.243 3.823-32.537 9.103-53.831 9.103-29.437 0-50.73-7.426-65.57-21.779-14.839-13.875-22.971-34.942-22.738-58.625.253-53.604 39.255-84.235 92.137-84.235 20.81 0 36.852 4.073 44.74 7.896l-7.657 29.202c-8.859-3.829-19.849-6.95-37.567-6.95-30.396 0-53.357 17.233-53.357 52.173 0 33.265 20.81 52.882 50.73 52.882 8.375 0 15.072-.96 17.94-2.395v-33.745h-24.875v-28.471h60.049v84.944h-.001z"/></g></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Supports SVG </dt><dd class="mt-2 text-base/7 text-gray-400"> Inline vector graphics stay intact so icons, logos, and illustrations survive export. </dd></div></div><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-9"><path d="M13.41 20.79L12.0001 21.7C10.6901 22.51 8.87006 21.6 8.87006 19.98V14.63C8.87006 13.92 8.47006 13.01 8.06006 12.51L4.22003 8.47C3.71003 7.96 3.31006 7.06001 3.31006 6.45001V4.13C3.31006 2.92 4.22008 2.01001 5.33008 2.01001H18.67C19.78 2.01001 20.6901 2.92 20.6901 4.03V6.25C20.6901 7.06 20.1801 8.07001 19.6801 8.57001"/><path d="M17.0799 11.89L13.5399 15.43C13.3999 15.57 13.2699 15.83 13.2399 16.02L13.0499 17.37C12.9799 17.86 13.3199 18.2 13.8099 18.13L15.1599 17.94C15.3499 17.91 15.6199 17.78 15.7499 17.64L19.2899 14.1C19.8999 13.49 20.1899 12.78 19.2899 11.88C18.3999 10.99 17.6899 11.28 17.0799 11.89Z"/><path d="M16.58 12.39C16.88 13.47 17.7199 14.31 18.7999 14.61"/></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Removes redundant noise </dt><dd class="mt-2 text-base/7 text-gray-400"> Keeps the generated markup focused by avoiding repetitive wrappers, duplicate declarations, and low-value styling clutter. </dd></div></div><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewB
36ox="-0.5 0 25 25" xmlns="http://www.w3.org/2000/svg" class="size-9"><path d="M18.92 7.96997C18.9781 7.58275 19.0048 7.19156 19 6.80005C17.8347 5.58901 16.437 4.62559 14.8905 3.96753C13.344 3.30947 11.6806 2.97021 10 2.97021C8.31935 2.97021 6.65602 3.30947 5.10956 3.96753C3.5631 4.62559 2.16532 5.58901 1 6.80005C1 20.86 10 22.97 10 22.97C10.6656 22.6883 11.3077 22.3539 11.92 21.97"/><path d="M23 13.97H13"/><path d="M21 10.9199H15C13.8954 10.9199 13 11.8154 13 12.9199V17.9199C13 19.0245 13.8954 19.9199 15 19.9199H21C22.1046 19.9199 23 19.0245 23 17.9199V12.9199C23 11.8154 22.1046 10.9199 21 10.9199Z"/></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Understands obfuscated markup </dt><dd class="mt-2 text-base/7 text-gray-400"> Works with production pages where class names are compressed, generated, or not useful as a source of truth. </dd></div></div></dl></div></div></section></app-home-features><app-home-use-cases ngh="0"><section id="use-cases" class="relative"><div class="pt-24 pb-12 lg:pt-28 lg:pb-16"><div class="mx-auto container max-w-7xl"><div class="mx-auto max-w-2xl text-center"><h4 class="text-center text-xl font-semibold text-blue-300"> Tailfind use cases </h4><h2 class="mx-auto mt-2 max-w-2xl text-center text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"> Use the browser as the source of truth </h2><p class="mt-6 text-lg/8 text-gray-400"> Tailfind helps when the real interface already exists and you need a faster way to turn it into editable Tailwind CSS. </p></div><div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl"><dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16"><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg height="512" version="1.1" viewBox="0 0 682.667 682.667" width="512" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0" class="size-8" style="enable-background: new 0 0 512 512;"><g><defs><clipPath clipPathUnits="userSpaceOnUse" id="a"><path d="M0 512h512V0H0Z" data-original="#000000" fill="currentColor" opacity="1"/></clipPath></defs><path d="m0 0-23.835-23.836 56.568-56.568 23.836 23.835" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="20" transform="matrix(1.33333 0 0 -1.33333 176.746 430.495)" style="stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="m0 0-22.078-22.078" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="20" transform="matrix(1.33333 0 0 -1.33333 212.115 470.551)" style="stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 682.667)"><path d="m0 0 56.521-56.521c.732.518 19.809 19.809 19.809 19.809" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="20" transform="translate(70.749 127.317)" style="stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="M0 0a39.82 39.82 0 0 1-20.645-10.984c-15.621-15.62-15.621-40.947 0-56.568 15.622-15.621 40.948-15.621 56.569 0 15.621 15.621 11.753 37.079-3.868 52.7L15.134-31.774" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="20" transform="translate(199.655 246.563)" style="stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="m0 0-34.531 77.013c-.627 1.496.874 2.999 2.37 2.375l76.823-34.726" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="20" transform="translate(278.163 221.594)" style="stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="m0 0 31.52 31.52" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="20" transform="translate(270.897 242.108)" style="stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="M0 0a39.81 39.81 0 0 1-20.645-10.983c-15.621-15.621-15.621-40.948 0-56.569 15.622-15.621 40.948-15.621 56.569 0 6.345 6.344 9.474 13.651 9.907 21.139.09 1.549.064 3.106-.073 4.664" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="20" transform="translate(333.352 380.26)" style="stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="m0 0 45.742-9.604-9.609 45.451" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="20" transform="translate(348.693 405.261)" style="stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="m0 0-28.825 28.966" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="20" transform="translate(423.26 366.691)" style="stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="M0 0c11.715 11.716 11.715 30.71 0 42.426l-84.853 84.853c-11.716 11.716-30.71 11.716-42.426 0l-337.148-337.147c-11.715-11.716-11.715-30.711 0-42.426l84.853-84.853c11.716-11.716 30.711-11.716 42.427 0z" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="30" transform="translate(488.213 360.934)" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="M0 0c29.014-12.378 60.948-19.235 94.485-19.235 133.101 0 241 107.899 241 241 0 33.537-6.857 65.471-19.235 94.485" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="30" transform="translate(161.515 34.235)" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/>
36<path d="M0 0a171.47 171.47 0 0 0 4.521-39.2c0-94.441-76.56-171-171-171-13.49 0-26.612 1.568-39.201 4.521" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="30" transform="translate(422.48 295.2)" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="M0 0a171.47 171.47 0 0 0-4.521 39.2c0 94.441 76.56 171 171 171 13.489 0 26.611-1.568 39.2-4.52" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="30" transform="translate(89.521 216.8)" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/><path d="M0 0c-29.014 12.378-60.948 19.235-94.485 19.235-133.101 0-241-107.899-241-241 0-33.537 6.857-65.471 19.235-94.485" data-original="#000000" fill="none" stroke="currentColor" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-opacity="" stroke-width="30" transform="translate(350.485 477.765)" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; stroke-dasharray: none; stroke-opacity: 1;"/></g></g></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Legacy UI rewrites </dt><dd class="mt-2 text-base/7 text-gray-400"> Use the shipped product as your reference, capture the exact block you need, and start the rewrite from real structure instead of screenshots and guesswork. </dd></div></div><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg height="512" version="1.1" viewBox="0 0 512 512" width="512" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0" class="size-8" style="enable-background: new 0 0 512 512;"><g><path d="M475.292 209.559a127.544 127.544 0 0 0-10.96-104.77C436.395 56.148 380.234 31.123 325.385 42.9A127.597 127.597 0 0 0 229.175.003c-56.065-.128-105.81 35.969-123.059 89.314a127.61 127.61 0 0 0-85.298 61.873C-7.326 199.703-.91 260.856 36.691 302.457a127.544 127.544 0 0 0 10.96 104.77c27.937 48.641 84.098 73.666 138.947 61.889a127.502 127.502 0 0 0 96.21 42.881c56.097.144 105.858-35.985 123.107-89.378a127.61 127.61 0 0 0 85.298-61.873c28.113-48.513 21.681-109.618-15.904-151.219zM282.84 478.541a95.635 95.635 0 0 1-61.425-22.208 62.752 62.752 0 0 0 3.024-1.712l101.954-58.881a16.575 16.575 0 0 0 8.384-14.512V237.495l43.089 24.881c.464.224.768.672.832 1.184v119.027c-.064 52.929-42.929 95.842-95.858 95.954zm-206.149-88.05a95.54 95.54 0 0 1-11.44-64.289c.752.448 2.08 1.264 3.024 1.808l101.954 58.881a16.6 16.6 0 0 0 16.752 0l124.467-71.874v49.761a1.593 1.593 0 0 1-.608 1.328l-103.058 59.505c-45.905 26.433-104.53 10.72-131.075-35.121zM49.859 167.942a95.634 95.634 0 0 1 49.937-42.065c0 .88-.048 2.432-.048 3.52v117.779a16.587 16.587 0 0 0 8.368 14.496l124.467 71.858-43.089 24.88a1.523 1.523 0 0 1-1.456.128L84.964 298.985c-45.809-26.529-61.521-85.138-35.121-131.027zm354.023 82.386-124.467-71.874 43.089-24.864a1.523 1.523 0 0 1 1.456-.128l103.074 59.505c45.889 26.512 61.617 85.218 35.105 131.107a95.907 95.907 0 0 1-49.921 42.049V264.824a16.561 16.561 0 0 0-8.32-14.496zm42.881-64.546c-.752-.464-2.08-1.264-3.024-1.808l-101.954-58.881a16.6 16.6 0 0 0-16.752 0l-124.467 71.873v-49.761a1.593 1.593 0 0 1 .608-1.328L304.232 86.42c45.905-26.481 104.594-10.72 131.059 35.201a95.924 95.924 0 0 1 11.44 64.161zm-269.621 88.69-43.105-24.88a1.509 1.509 0 0 1-.832-1.184V129.381c.032-52.993 43.025-95.938 96.018-95.906 22.416 0 44.113 7.872 61.345 22.208a71.534 71.534 0 0 0-3.024 1.712L185.59 116.277a16.55 16.55 0 0 0-8.384 14.496l-.064 143.667zm23.408-50.465 55.441-32.017 55.441 32.001v64.017l-55.441 32.001-55.441-32.001z" data-original="#000000" fill="currentColor" opacity="1"/></g></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Best UI input for AI </dt><dd class="mt-2 text-base/7 text-gray-400"> Give AI clean Tailwind utilities instead of rough markup or screenshots, and get AI-generated code that lands much closer to the final result. </dd></div></div><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg height="512" version="1.1" viewBox="0 0 512.042 512.042" width="512" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0" class="size-8" style="enable-background: new 0 0 512 512;"><g><path d="M490.091 11.951a40.537 40.537 0 0 0-54.472-2.739L292.347 126.245H50.05c-22.083 0-40.049 17.961-40.049 40.038v241.384c0 22.077 17.966 40.038 40.049 40.038h113.82v34.336h-25.228c-8.284 0-15 6.716-15 15s6.716 15 15 15h160.513c8.284 0 15-6.716 15-15s-6.716-15-15-15h-25.228v-34.336h113.82c22.084 0 40.05-17.961 40.05-40.038v-261.55l65.046-79.711a40.538 40.538 0 0 0-2.752-54.455zM282.683 186.282c.461-9.039 4.58-17.165 11.616-22.895L319.256 143l39.847 39.847-20.434 25.041c-5.722 6.995-13.844 11.096-22.869 11.546-9.035.456-17.518-2.82-23.908-9.21-6.4-6.4-9.671-14.903-9.209-23.942zm-12.045 96.782c-6.647 6.647-17.718 9.707-32.902 9.098-11.508-.463-21.364.346-29.715 1.851 1.504-8.35 2.313-18.212 1.851-29.715-.61-15.185 2.451-26.254 9.098-32.901 6.9-6.9 16.075-10.701 25.834-10.701s18.933 3.8 25.833 10.701c14.245 14.245 14.245 37.422.001 51.667zm-26.711 198.978H193.87v-34.336h50.057zm153.87-74.375c0 5.535-4.508 10.038-10.05 10.038H50.05c-5.541 0-10.049-4.503-10.049-10.038v-12.798h357.796zm0-42.798H40.001V166.283c0-5.535 4.508-10.038 10.049-10.038h211.378c-5.133 8.569-8.187 18.344-8.706 28.508-.11 2.15-.104 4.295.011 6.426a67.683 67.683 0 0 0-7.928-.484c-17.772 0-34.481 6.921-47.047 19.488-12.812 12.811-18.82 31.423-17.86 55.319 1.278 31.806-9.267 44.573-10.089 45.517-5.613 5.875-5.532 15.188.243 20.964a14.954 14.954 0 0 0 10.607 4.394 14.95 14.95 0 0 0 10.356-4.149c.939-.818 13.709-11.366 45.518-10.09 23.903.962 42.508-5.048 55.32-17.86 14.969-14.97 21.281-35.355 18.975-54.907 1.134.063 2.271.103 3.412.103 1.017 0 2.037-.025 3.057-.076 17.345-.866 33.599-9.072 44.606-22.528l35.896-43.988v181.987zm-206.533-32.885s-.074.083-.232.228c.078-.075.155-.151.232-.228zm-21.213-21.214-.227.231c.145-.157.227-.231.227-.231zM469.599 47.44l-91.433 112.046-35.56-35.559 111.991-91.481a10.63 10.63 0 0 1 14.28.718 10.626 10.626 0 0 1 .722 14.276z" data-original="#000000" fill="currentColor" opacity="1"/></g></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Design is a code-first process </dt><dd class="mt-2 text-base/7 text-gray-400"> When the browser is the most accurate design source, Tailfind lets you inspect the implementation itself and turn it into an editable Tailwind baseline. </dd></div></div><div class="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4"><div aria-hidden="true" class="mt-0.5 inline-flex size-14 shrink-0 items-center justify-center rounded-[1.25rem] border border-white/10 text-blue-400"><svg height="512" version="1.1" viewBox="0 0 512 512" width="512" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0" class="size-8" style="enable-background: new 0 0 512 512;"><g><path d="M72.55 330.86V180.75M229.81 241.38 98.6 165.62M256 437V286M230.03 452 98.42 376.03M256 437V286M413.58 376.03 281.97 452M413.4
36165.62l-131.21 75.76M439.45 330.86V180.75M229.81 241.38 98.6 165.62M413.4 165.62l-131.21 75.76M413.53 135.66l-131.54-75.7M230.01 59.96l-131.54 75.7" data-original="#000000" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="30" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"/><circle cx="256" cy="45" data-original="#000000" fill="none" r="30" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="30" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"/><circle cx="256" cy="467" data-original="#000000" fill="none" r="30" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="30" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"/><circle cx="439.447" cy="360.862" data-original="#000000" fill="none" r="30" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="30" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"/><circle cx="439.447" cy="150.748" data-original="#000000" fill="none" r="30" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="30" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"/><circle cx="256" cy="256" data-original="#000000" fill="none" r="30" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="30" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"/><circle cx="72.553" cy="360.862" data-original="#000000" fill="none" r="30" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="30" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"/><circle cx="72.553" cy="150.748" data-original="#000000" fill="none" r="30" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="30" style="stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10;"/></g></svg></div><div class="min-w-0"><dt class="block text-lg font-semibold tracking-tight text-white"> Prototyping from live interfaces </dt><dd class="mt-2 text-base/7 text-gray-400"> Start from a real pattern already working in the browser, then remix the exported HTML in Tailwind Play or in your codebase without beginning from an empty file. </dd></div></div></dl></div></div></div><div class="pt-8 pb-16 lg:pt-10 lg:pb-20 container"><div class="mx-auto max-w-4xl px-6 lg:px-8"><h2 class="text-center text-lg/8 font-semibold text-white"> Useful for developers who use frontend frameworks like </h2><div class="mx-auto mt-10 grid max-w-4xl grid-cols-2 items-center gap-x-8 gap-y-10 md:grid-cols-4 lg:grid-cols-7"><figure class="flex flex-col items-center gap-3 text-center"><img alt="Angular" height="48" src="/frameworks/angular.svg" width="158" class="max-h-12 w-full object-contain"><figcaption class="text-sm font-medium text-white/70">Angular</figcaption></figure><figure class="flex flex-col items-center gap-3 text-center"><img alt="React" height="48" src="/frameworks/react.svg" width="158" class="max-h-12 w-full object-contain"><figcaption class="text-sm font-medium text-white/70">React</figcaption></figure><figure class="flex flex-col items-center gap-3 text-center"><img alt="Vue" height="48" src="/frameworks/vue.svg" width="158" class="max-h-12 w-full object-contain"><figcaption class="text-sm font-medium text-white/70">Vue</figcaption></figure><figure class="flex flex-col items-center gap-3 text-center"><img alt="Svelte" height="48" src="/frameworks/svelte.svg" width="158" class="max-h-12 w-full object-contain"><figcaption class="text-sm font-medium text-white/70">Svelte</figcaption></figure><figure class="flex flex-col items-center gap-3 text-center"><img alt="Next.js" height="48" src="/frameworks/next.svg" width="158" class="max-h-12 w-full object-contain"><figcaption class="text-sm font-medium text-white/70">Next.js</figcaption></figure><figure class="flex flex-col items-center gap-3 text-center"><img alt="Astro" height="48" src="/frameworks/astro.svg" width="158" class="max-h-12 w-full object-contain"><figcaption class="text-sm font-medium text-white/70">Astro</figcaption></figure><figure class="flex flex-col items-center gap-3 text-center"><img alt="Nuxt" height="48" src="/frameworks/nuxt.svg" width="158" class="max-h-12 w-full object-contain"><figcaption class="text-sm font-medium text-white/70">Nuxt</figcaption></figure></div></div></div></section></app-home-use-cases><app-home-pricing ngh="0"><section id="pricing" class="relative"><app-background-squares ngh="0"><div class="absolute inset-0 pointer-events-none border-b border-t border-white/5 mask-[linear-gradient(180deg,transparent_0%,black_0%,black_100%,transparent_100%)]"><div class="absolute inset-x-0 top-0 h-136 bg-[radial-gradient(circle_at_top,rgba(6,182,212,0.18),transparent_48%)]"></div><div class="absolute inset-0 bg-[linear-gradient(180deg,rgba(4,13,24,0.74),rgba(4,13,24,0.88)_32%,rgba(2,8,23,0.98)_100%)]"></div><div class="absolute inset-x-0 bottom-0 top-0 bg-[linear-gradient(90deg,rgba(148,163,184,0.04)_1px,transparent_1px)] bg-size-[68px_100%]"></div><div class="absolute inset-x-0 bottom-0 top-0 bg-[linear-gradient(180deg,rgba(148,163,184,0.032)_1px,transparent_1px)] bg-size-[100%_68px]"></div></div></app-background-squares><app-gradient-glows ngh="3"><div aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden"><div class="absolute rounded-full" style="background: radial-gradient(circle, rgba(14,165,233,0.12), rgba(96,165,250,0.07) 40%, transparent 74%); filter: blur(3.4599360835730755rem); height: 21.302888938464694rem; left: 78.6619258536848%;
36 opacity: 0.9019786151746071; top: 53.14294627312013rem; transform: translateX(-50%); width: 26.098828215632746rem;"></div><div class="absolute rounded-full" style="background: radial-gradient(circle, rgba(125,211,252,0.14), rgba(37,99,235,0.08) 38%, transparent 72%); filter: blur(3.2948619318745656rem); height: 17.5726898166045rem; left: 50.193434565272845%; opacity: 0.8393022161091127; top: 30.342647721454156rem; transform: translateX(-50%); width: 35.97198881870935rem;"></div><!----></div></app-gradient-glows><div class="relative px-0 pt-24 pb-16 lg:pt-28 lg:pb-20 text-base font-normal leading-6"><div class="container my-0 py-0"><div class="mx-auto max-w-2xl text-center"><h4 class="text-center text-xl font-semibold text-blue-300"> Save your time </h4><h2 class="mx-auto mt-2 max-w-2xl text-center text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"> Try before you buy </h2><p class="mt-6 text-lg/8 text-gray-400"> Use the free trial in your own development task, then keep the extension forever when it becomes part of your workflow. </p></div><div class="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-3xl lg:grid-cols-2"><div class="rounded-3xl rounded-t-3xl bg-white/[0.025] p-8 ring-1 ring-white/10 sm:mx-8 sm:rounded-b-none sm:p-10 lg:mx-0 lg:rounded-tr-none lg:rounded-bl-3xl backdrop-blur-sm"><h3 id="tier-trial" class="text-base/7 font-semibold text-blue-300"> Trial </h3><p class="mt-4 flex flex-wrap items-baseline gap-x-2 gap-y-1"><span class="max-w-full break-words text-4xl font-semibold tracking-tight text-white"> Free </span><span class="text-base text-gray-400"> 5 copies </span></p><p class="mt-6 text-base/7 text-gray-300"> Capture 5 page fragments for free and see how the exported HTML fits you </p><ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 sm:mt-10"><li class="flex gap-x-3"><svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" class="h-6 w-5 flex-none text-blue-300"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg> 5 trial copies </li><li class="flex gap-x-3"><svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" class="h-6 w-5 flex-none text-blue-300"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg> Any website capture </li><li class="flex gap-x-3"><svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" class="h-6 w-5 flex-none text-blue-300"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg> Contact support </li><li class="flex gap-x-3"><svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" class="h-6 w-5 flex-none text-blue-300"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg> Tailwind CSS </li></ul><app-trial-button labelkey="buttons.download" class="inline-flex items-center justify-center mt-8 block w-full sm:mt-10" ngh="0"><a rel="noopener noreferrer" target="_blank" class="inline-flex min-h-11 cursor-pointer items-center justify-center gap-2 rounded-[14px] border border-[rgba(96,165,250,0.22)] bg-[rgba(15,23,42,0.88)] px-7 py-3 text-md font-bold leading-5 text-blue-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition duration-200 hover:border-[rgba(96,165,250,0.34)] hover:bg-[rgba(30,64,175,0.22)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400 w-full" href="https://chromewebstore.google.com/detail/tailfind/famibopnbenoegknengohifmnjnkhohh"><img alt aria-hidden="true" src="/brand/google-chrome-icon.svg" class="h-5 w-5"> Download 37</a></app-trial-button></div><div class="relative rounded-3xl bg-gray-800 p-8 ring-1 ring-white/10 sm:p-10"><h3 id="tier-lifetime" class="text-base/7 font-semibold text-blue-300"> Lifetime Access </h3><p class="mt-4 flex items-baseline gap-x-2"><span class="text-5xl font-semibold tracking-tight text-white">$24</span><span class="text-base text-gray-400">USD</span></p><p class="mt-6 text-base/7 text-gray-300"> Pay once, keep Tailfind for the long run, and get every future update. </p><ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 sm:mt-10"><li class="flex gap-x-3"><svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" class="h-6 w-5 flex-none text-blue-300"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg> All Trial features </li><li class="flex gap-x-3"><svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" class="h-6 w-5 flex-none text-blue-300"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg> Unlimited copies </li><li class="flex gap-x-3"><svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" class="h-6 w-5 flex-none text-blue-300"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg> Future extension updates </li><li class="flex gap-x-3"><svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" class="h-6 w-5 flex-none text-blue-300"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg> AI learned algorithm </li><li class="flex gap-x-3"><svg aria-hidden="true" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" class="h-6 w-5 flex-none text-blue-300"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg> React output support </li></ul><app-buy-button class="flex items-center justify-center mt-8 w-full sm:mt-10" ngh="4"><button type="button" class="antialiased bg-[linear-gradient(180deg,#3b82f6,#2563eb)
37] cursor-pointer disabled:cursor-wait disabled:opacity-75 font-bold hover:brightness-110 inline-flex items-center justify-center leading-5 px-7 py-3 rounded-[14px] shadow-sm text-md text-white transition w-full" jsaction="click:;"><!----> Buy it now <!----><!----></button></app-buy-button><div class="text-center"><p class="mt-3 text-sm leading-5 text-gray-400"> 14 days refund </p></div></div></div></div></div></section></app-home-pricing><app-home-faq ngh="5"><section id="faq" class="relative"><div class="container pt-24 pb-12 lg:pt-28 lg:pb-16"><div class="mx-auto max-w-2xl text-center"><h4 class="text-xl font-semibold text-blue-300">Everything you need to know</h4><h2 class="mt-2 text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"> Frequently asked questions </h2></div><div class="container text-left"><div id="new" class="mt-20"><dl class="grid gap-y-16 gap-x-10 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"><div><dt class="text-white font-semibold leading-7"> What does Tailfind actually copy? </dt><dd class="mt-2 text-gray-400 leading-7"> A selected page fragment exported as plain Tailwind CSS for studying, prototyping, or rebuilding UI faster. </dd></div><div><dt class="text-white font-semibold leading-7"> Does it work with my framework? </dt><dd class="mt-2 text-gray-400 leading-7"> Yes. The output is regular HTML with Tailwind utilities, so you can paste it into Angular, React, Vue, Svelte, or a mixed frontend. </dd></div><div><dt class="text-white font-semibold leading-7"> Will it preserve complex styling? </dt><dd class="mt-2 text-gray-400 leading-7"> It combines authored classes and inline styles, then converts the selected result into portable Tailwind markup. </dd></div><div><dt class="text-white font-semibold leading-7"> Can I try it before buying? </dt><dd class="mt-2 text-gray-400 leading-7"> Yes. The free trial includes limited copies. Lifetime Access removes the copy limit and includes future extension updates. </dd></div><div><dt class="text-white font-semibold leading-7"> Does it work on any website? </dt><dd class="mt-2 text-gray-400 leading-7"> It is built for visible interface fragments in Chrome and works best when you can select the element directly. </dd></div><div><dt class="text-white font-semibold leading-7"> Can I copy a whole page instead of one element? </dt><dd class="mt-2 text-gray-400 leading-7"> Yes. Use 'Web Page' copy for larger captures, or element selection when you need a tighter fragment. </dd></div><!----></dl></div></div></div></section></app-home-faq><app-home-contact ngh="0"><section id="contact" class="relative overflow-hidden border-y border-white/10 bg-slate-950"><app-background-squares ngh="0"><div class="absolute inset-0 pointer-events-none border-b border-t border-white/5 mask-[linear-gradient(180deg,transparent_0%,black_0%,black_100%,transparent_100%)]"><div class="absolute inset-x-0 top-0 h-136 bg-[radial-gradient(circle_at_top,rgba(6,182,212,0.18),transparent_48%)]"></div><div class="absolute inset-0 bg-[linear-gradient(180deg,rgba(4,13,24,0.74),rgba(4,13,24,0.88)_32%,rgba(2,8,23,0.98)_100%)]"></div><div class="absolute inset-x-0 bottom-0 top-0 bg-[linear-gradient(90deg,rgba(148,163,184,0.04)_1px,transparent_1px)] bg-size-[68px_100%]"></div><div class="absolute inset-x-0 bottom-0 top-0 bg-[linear-gradient(180deg,rgba(148,163,184,0.032)_1px,transparent_1px)] bg-size-[100%_68px]"></div></div></app-background-squares><app-gradient-glows ngh="3"><div aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden"><div class="absolute rounded-full" style="background: rgb(59 130 246 / 0.16); filter: blur(4.281870694252443rem); height: 17.26050540875226rem; left: 12.786663655981563%; opacity: 0.9302595911778687; top: -4.351378932859124rem; width: 17.41048320454446rem;"></div><div class="absolute rounded-full" style="background: rgb(34 211 238 / 0.12); bottom: -6.269816982292552rem; filter: blur(3.697247107008482rem); height: 19.020705240198733rem; opacity: 0.9795873044300334; right: 11.349548361212133%; width: 21.43403441328452rem;"></div><!----></div></app-gradient-glows><div class="container relative py-16"><div class="grid gap-10 lg:grid-cols-[minmax(0,1.45fr)_minmax(18rem,0.95fr)] lg:items-start"><div class="max-w-3xl"><h4 class="text-xl font-semibold text-blue-300">Tailfind already handles real-world cases</h4><h2 class="mt-4 max-w-2xl text-3xl font-semibold tracking-tight text-balance text-white"> And keeps improving with AI </h2><p class="mt-6 max-w-2xl text-base leading-7 text-slate-300"> Dense markup, legacy CSS, and unusual components are not a problem for Tailfind. It removes the repetitive part first, so you start from real structure instead of rebuilding the layout by hand. </p><div class="mt-6 flex flex-wrap gap-3 sm:gap-4">
37<app-try-button hidden data-tailfind-demo-control="true" ngh="0"><button type="button" class="bg-[rgba(15,23,42,0.88)] border border-[rgba(96,165,250,0.22)] cursor-pointer duration-200 focus-visible:outline-2 focus-visible:outline-blue-400 focus-visible:outline-offset-2 font-bold gap-2 hover:bg-[rgba(30,64,175,0.22)] hover:border-[rgba(96,165,250,0.34)] inline-flex items-center justify-center leading-5 px-7 py-3 rounded-[14px] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] text-blue-100 text-md transition" aria-pressed="false" jsaction="click:;"><img alt aria-hidden="true" src="/brand/tailfind-mark-dark.svg" class="h-5 w-5"> Try Tailfind 38</button></app-try-button><app-trial-button class="inline-flex items-center justify-center" ngh="0"><a rel="noopener noreferrer" target="_blank" class="inline-flex min-h-11 cursor-pointer items-center justify-center gap-2 rounded-[14px] border border-[rgba(96,165,250,0.22)] bg-[rgba(15,23,42,0.88)] px-7 py-3 text-md font-bold leading-5 text-blue-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] transition duration-200 hover:border-[rgba(96,165,250,0.34)] hover:bg-[rgba(30,64,175,0.22)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400" href="https://chromewebstore.google.com/detail/tailfind/famibopnbenoegknengohifmnjnkhohh"><img alt aria-hidden="true" src="/brand/google-chrome-icon.svg" class="h-5 w-5"> Download 39</a></app-trial-button></div></div><div class="rounded-3xl border border-white/10 bg-white/[0.025] p-7 shadow-sm shadow-black/20 backdrop-blur-sm"><p class="text-sm font-semibold uppercase tracking-[0.2em] text-blue-200"> Contact support </p><p class="mt-4 text-base leading-7 text-slate-100"> If you are not happy with your purchase, you found an issue with Tailfind, or you have a question, please contact us at <a class="font-semibold text-blue-300 transition-colors duration-200 hover:text-blue-200" href="mailto:[email protected]"> [email protected] </a></p></div></div></div></section></app-home-contact></app-home-page><!----><app-footer _ngcontent-ng-c1027794534 class ngh="7"><footer class="relative"><div class="container pb-8"><div class="pt-8"><div class="grid gap-6 text-sm leading-6 text-slate-400 lg:grid-cols-[1fr_auto]"><p>© 2026 Tailfind. Built for developers.</p><div class="flex flex-wrap items-center justify-center gap-x-5 gap-y-3 lg:justify-end"><nav class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 lg:justify-end" aria-label="Legal links"><a class="font-medium transition-colors duration-200 hover:text-slate-200 focus-visible:text-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300/70" href="/terms" jsaction="click:;"> Terms of Service </a><a class="font-medium transition-colors duration-200 hover:text-slate-200 focus-visible:text-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300/70" href="/privacy" jsaction="click:;"> Privacy Policy </a><a class="font-medium transition-colors duration-200 hover:text-slate-200 focus-visible:text-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-300/70" href="/refund" jsaction="click:;"> Refund Policy </a><!----></nav><app-language-switcher ngh="6"><div class="relative inline-flex"><button aria-haspopup="menu" type="button" class="text-nowrap flex h-10 min-h-8 cursor-pointer items-center justify-center gap-[0.3em] rounded-full border border-white/10 bg-white/5 py-0 ps-[18px] pr-5 text-center text-sm font-medium leading-none text-slate-100 shadow-sm transition duration-200 ease-[cubic-bezier(0,0,1,1)] hover:border-white/20 hover:bg-white/10 focus:bg-white/10 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-300/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-300/70 disabled:bg-white/[0.122] disabled:text-white/60" aria-expanded="false" aria-label="Choose language" jsaction="click:;"><div class="relative flex gap-3 rounded-full transition-opacity duration-[400ms] ease-in-out"><svg aria-hidden="true" fill="none" viewBox="0 0 20 20" width="14" xmlns="http://www.w3.org/2000/svg" class="block w-3.5"><path clip-rule="evenodd" d="M1.667 10a8.333 8.333 0 1 1 16.666 0 8.333 8.333 0 0 1-16.666 0M10 3.333h-.009l.001.002c-.032.008-.186.074-.411.409-.214.319-.43.792-.622 1.414-.325 1.056-.55 2.446-.61 4.009h3.302c-.06-1.563-.285-2.953-.61-4.009-.192-.622-.408-1.095-.622-1.414-.224-.335-.379-.401-.41-.409l.001-.002zm1.651 7.5H8.349c.062 1.621.302 3.055.646 4.123.203.628.428 1.089.644 1.383.107.146.198.232.265.28a.4.4 0 0 0 .071.041l.023.007h.004l.023-.007a.4.4 0 0 0 .071-.041c.067-.048.158-.134.265-.28.216-.294.441-.755.644-1.383.344-1.068.584-2.502.646-4.123m-4.97-1.666c.061-1.704.306-3.264.685-4.499q.152-.493.338-.929a6.68 6.68 0 0 0-4.319 5.428zm-3.296 1.666h3.296c.063 1.766.323 3.379.728 4.635q.134.417.295.793a6.68 6.68 0 0 1-4.319-5.428m9.934 0h3.296a6.68 6.68 0 0 1-4.319 5.428 9 9 0 0 0 .295-.793c.405-1.256.665-2.869.728-4.635m3.296-1.666h-3.296c-.061-1.704-.305-3.264-.685-4.499a9 9 0 0 0-.338-.929 6.68 6.68 0 0 1 4.319 5.428" fill="currentColor" fill-rule="evenodd" class="text-sky-300"/></svg><div class="capitalize leading-none"><span class="flex gap-2"> English <span class="text-slate-400">United States</span></span></div></div></button><div class="absolute right-0 bottom-full z-50 w-[200px] pb-2 opacity-100 transition duration-150 invisible opacity-0 pointer-events-none"><div class="max-h-[min(31rem,calc(100dvh-6rem))] overflow-y-auto rounded-2xl border border-white/10 bg-slate-950/95 p-2 shadow-2xl shadow-black/40 backdrop-blur-xl"><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/" aria-current="true" jsaction="click:;"><span class="text-slate-100"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" class="h-4 w-4"><path clip-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" fill-rule="evenodd"/></svg><!----></span><span>English</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/de" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Deutsch</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/fr" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Français</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/es" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Español</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/es-419" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Español (Latinoamérica)</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/it" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Italiano</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/pt" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Português</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/pt-br" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Português (Brasil)</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/nl" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Nederlands</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/sv" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Svenska</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/no" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Norsk</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/da" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Dansk</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/fi" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Suomalainen</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/pl" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Polski</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/ro" jsaction="click:;"><span class="text-slate-100"><!----></span><span>RomânÄ</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/tr" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Türkçe</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/ru" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Ð ÑÑÑкий</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/uk" jsaction="click:;"><span class="text-slate-100"><!----></span><span>УкÑаÑнÑÑка</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/ja" jsaction="click:;"><span class="text-slate-100"><!----></span><span>æ¥æ¬èª</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/ko" jsaction="click:;"><span class="text-slate-100"><!----></span><span>íêµì´</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/zh" jsaction="click:;"><span class="text-slate-100"><!----></span><span>ç¹é«ä¸æ</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/zh-cn" jsaction="click:;"><span class="text-slate-100"><!----></span><span>ç®ä½ä¸æ</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/hi" jsaction="click:;"><span class="text-slate-100"><!----></span><span>हिà¤à¤¦à¥</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/id" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Bahasa Indonesia</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/vi" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Tiếng Viá»t</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/th" jsaction="click:;"><span class="text-slate-100"><!----></span><span>à¹à¸à¸¢</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/ar" jsaction="click:;"><span class="text-slate-100"><!----></span><span>عربÙ</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/cs" jsaction="click:;"><span class="text-slate-100"><!----></span><span>ÄeÅ¡tina</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/he" jsaction="click:;"><span class="text-slate-100"><!----></span><span>×¢×ר×ת</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/el" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Îλληνικά</span></a><a class="grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold leading-5 text-slate-100 transition hover:bg-blue-400/10 focus-visible:bg-blue-400/10 focus-visible:outline-none" href="/hu" jsaction="click:;"><span class="text-slate-100"><!----></span><span>Magyar</span></a><!----></div></div></div></app-language-switcher></div></div></div></div></footer></app-footer></div><app-drawer _ngcontent-ng-c1027794534 ngh="8"><div class="fixed inset-0 z-[60] overflow-x-clip lg:hidden pointer-events-none" aria-hidden="true"><button type="button" class="absolute inset-0
39 bg-slate-950/70 backdrop-blur-sm transition-opacity duration-300 ease-out motion-reduce:transition-none opacity-0" aria-label="Close navigation menu" jsaction="click:;"></button><aside id="app-navigation-drawer" class="absolute inset-y-0 right-0 flex h-full max-h-dvh w-full max-w-sm flex-col border-l border-white/10 bg-slate-950 pb-[calc(2rem+var(--safe-area-bottom))] pt-[calc(1.5rem+var(--safe-area-top))] pr-[calc(1.5rem+var(--safe-area-right))] pl-[calc(1.5rem+var(--safe-area-left))] shadow-2xl transition-transform duration-300 ease-out motion-reduce:transition-none translate-x-full" aria-label="Mobile navigation"><div class="flex items-center justify-between gap-4"><div class="flex items-center gap-4"><a class="shrink-0" aria-label="Tailfind home" href="/" jsaction="click:;"><img alt="Tailfind" height="582" src="/brand/tailfind-logo-dark.svg" width="2234" class="h-8 w-auto sm:h-9"></a></div><button type="button" class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/5 text-slate-100 transition-colors duration-200 hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60" aria-label="Close navigation menu" jsaction="click:;"><svg aria-hidden="true" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M3.33337 3.33325L12.6667 12.6666M12.6667 3.33325L3.33337 12.6666" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"/></svg></button></div><div class="mt-8 space-y-6 border-t border-white/10 pt-5 overflow-y-auto"><section><h2 class="px-4 font-sora text-sm font-semibold leading-6 text-sky-300"> Product </h2><div class="mt-2 space-y-1"><a class="block rounded-2xl px-4 py-3 text-base font-semibold text-slate-100 transition-colors duration-200 hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none" href="/#overview" jsaction="click:;"><span>Overview</span><span class="mt-1 block text-sm font-medium leading-5 text-slate-400"> Capture UI and export Tailwind CSS. </span></a><a class="block rounded-2xl px-4 py-3 text-base font-semibold text-slate-100 transition-colors duration-200 hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none" href="/#features" jsaction="click:;"><span>Features</span><span class="mt-1 block text-sm font-medium leading-5 text-slate-400"> Selection, conversion, and Play export. </span></a><a class="block rounded-2xl px-4 py-3 text-base font-semibold text-slate-100 transition-colors duration-200 hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none" href="/#use-cases" jsaction="click:;"><span>Use Cases</span><span class="mt-1 block text-sm font-medium leading-5 text-slate-400"> Migration, QA, and rebuild workflows. </span></a><a class="block rounded-2xl px-4 py-3 text-base font-semibold text-slate-100 transition-colors duration-200 hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none" href="/#pricing" jsaction="click:;"><span>Pricing</span><span class="mt-1 block text-sm font-medium leading-5 text-slate-400"> Trial access and lifetime license. </span></a><a class="block rounded-2xl px-4 py-3 text-base font-semibold text-slate-100 transition-colors duration-200 hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none" href="/#faq" jsaction="click:;"><span>FAQ</span><span class="mt-1 block text-sm font-medium leading-5 text-slate-400"> Copying, support, and refunds. </span></a><!----></div></section><section><h2 class="px-4 font-sora text-sm font-semibold leading-6 text-sky-300"> Converters </h2><div class="mt-2 space-y-1"><a class="block rounded-2xl px-4 py-3 text-base font-semibold text-slate-100 transition-colors duration-200 hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none" href="/html-css-to-tailwind" jsaction="click:;"><span>HTML/CSS to Tailwind</span><span class="mt-1 block text-sm font-medium leading-5 text-slate-400"> Markup and CSS to Tailwind CSS. </span></a><a class="block rounded-2xl px-4 py-3 text-base font-semibold text-slate-100 transition-colors duration-200 hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none" href="/css-to-tailwind" jsaction="click:;"><span>CSS to Tailwind</span><span class="mt-1 block text-sm font-medium leading-5 text-slate-400"> CSS declarations to Tailwind classes. </span></a><a class="block rounded-2xl px-4 py-3 text-base font-semibold text-slate-100 transition-colors duration-200 hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none" href="/bootstrap-to-tailwind" jsaction="click:;"><span>Bootstrap to Tailwind</span><span class="mt-1 block text-sm font-medium leading-5 text-slate-400"> Bootstrap fragments to Tailwind CSS. </span></a><!----></div></section><!----></div><div class="mt-auto border-t border-white/10 pt-2"><div class="mt-4 flex items-center justify-between gap-3"><app-buy-button class="flex items-center justify-center w-full" ngh="1" jsaction="click:;"><button type="button" class="antialiased bg-[linear-gradient(180deg,#3b82f6,#2563eb)
39] cursor-pointer disabled:cursor-wait disabled:opacity-75 font-bold hover:brightness-110 inline-flex items-center justify-center leading-5 px-7 py-3 rounded-[14px] shadow-sm text-md text-white transition w-full" jsaction="click:;"><!----> Buy it now <!--ngtns--> - 24$ <!----><!----></button></app-buy-button></div></div></aside></div></app-drawer><app-payment-success-modal _ngcontent-ng-c1027794534 ngh="9"><!----></app-payment-success-modal><ngx-sonner-toaster _ngcontent-ng-c1027794534 theme="dark" offset="24px" ngh="10" jsaction="click:;"><!----></ngx-sonner-toaster></app-root> 40<link rel="modulepreload" href="chunk-GVFPK2T7.js"><link rel="modulepreload" href="chunk-VJ2WPAWS.js"><link rel="modulepreload" href="chunk-2LQ2Z6KX.js"><link rel="modulepreload" href="chunk-IVZHRRBD.js"><link rel="modulepreload" href="chunk-TYJX4SGH.js"><link rel="modulepreload" href="chunk-CQUMF2GU.js"><link rel="modulepreload" href="chunk-CRGHFQ77.js"><link rel="modulepreload" href="chunk-REXORSAB.js"><link rel="modulepreload" href="chunk-CZVWFPOO.js"><link rel="modulepreload" href="chunk-RLDGJ2DG.js">
40<script src="main-JW5S44FC.js" type="module"></script>
40 41<link rel="modulepreload" href="chunk-MN3DJEYR.js"> 42 43
44<script id="ng-state" type="application/json">{"tailfind-i18n:en":{"common":{"brandHome":"Tailfind home"},"buttons":{"buyNow":"Buy it now","checkoutOpening":"Opening checkout...","checkoutUnavailable":"Checkout is not available yet. Please try again or contact [email protected].","download":"Download","downloadTrial":"Download Trial","extensionForChrome":"Extension for Google Chrome","moreInfo":"More info","tryTailfind":"Try Tailfind","exitTailfind":"Exit Tailfind"},"navigation":{"toggleMenu":"Toggle navigation menu","closeMenu":"Close navigation menu","mobileNavigation":"Mobile navigation","product":{"label":"Product","overview":{"label":"Overview","description":"Capture UI and export Tailwind CSS."},"features":{"label":"Features","description":"Selection, conversion, and Play export."},"useCases":{"label":"Use Cases","description":"Migration, QA, and rebuild workflows."},"pricing":{"label":"Pricing","description":"Trial access and lifetime license."},"faq":{"label":"FAQ","description":"Copying, support, and refunds."}},"converters":{"label":"Converters","htmlCss":{"label":"HTML\u002FCSS to Tailwind","description":"Markup and CSS to Tailwind CSS."},"css":{"label":"CSS to Tailwind","description":"CSS declarations to Tailwind classes."},"bootstrap":{"label":"Bootstrap to Tailwind","description":"Bootstrap fragments to Tailwind CSS."}}},"language":{"label":"Language","open":"Choose language"},"footer":{"builtForDevelopers":"Built for developers.","legalLinks":"Legal links","terms":"Terms of Service","privacy":"Privacy Policy","refund":"Refund Policy"},"home":{"overview":{"frameworkKicker":"Copy & paste into your framework","headlinePrimary":"Convert live page","headlineSecondary":"into Tailwind CSS","description":"Google Chrome extension that helps you convert a real page, capture the right fragment, and keep moving with Tailwind CSS instead of rebuilding the whole component from scratch.","lifetimeAccess":"Lifetime Access"},"pricing":{"eyebrow":"Save your time","heading":"Try before you buy","description":"Use the free trial in your own development task, then keep the extension forever when it becomes part of your workflow.","trial":"Trial","free":"Free","copies":"{{ count }} copies","trialDescription":"Capture {{ count }} page fragments for free and see how the exported HTML fits you","trialCopies":"{{ count }} trial copies","anyWebsiteCapture":"Any website capture","contactSupport":"Contact support","tailwindReadyHtml":"Tailwind CSS","lifetimeAccess":"Lifetime Access","lifetimeDescription":"Pay once, keep Tailfind for the long run, and get every future update.","allTrialFeatures":"All Trial features","unlimitedCopies":"Unlimited copies","futureUpdates":"Future extension updates","aiLearnedAlgorithm":"AI learned algorithm","reactOutputSupport":"React output support","refund":"14 days refund"},"faq":{"kicker":"Everything you need to know","title":"Frequently asked questions","items":[{"question":"What does Tailfind actually copy?","answer":"A selected page fragment exported as plain Tailwind CSS for studying, prototyping, or rebuilding UI faster."},{"question":"Does it work with my framework?","answer":"Yes. The output is regular HTML with Tailwind utilities, so you can paste it into Angular, React, Vue, Svelte, or a mixed frontend."},{"question":"Will it preserve complex styling?","answer":"It combines authored classes and inline styles, then converts the selected result into portable Tailwind markup."},{"question":"Can I try it before buying?","answer":"Yes. The free trial includes limited copies. Lifetime Access removes the copy limit and includes future extension updates."},{"question":"Does it work on any website?","answer":"It is built for visible interface fragments in Chrome and works best when you can select the element directly."},{"question":"Can I copy a whole page instead of one element?","answer":"Yes. Use 'Web Page' copy for larger captures, or element selection when you need a tighter fragment."}]},"contact":{"kicker":"Tailfind already handles real-world cases","heading":"And keeps improving with AI","description":"Dense markup, legacy CSS, and unusual components are not a problem for Tailfind. It removes the repetitive part first, so you start from real structure instead of rebuilding the layout by hand.","supportLabel":"Contact support","supportTextPrefix":"If you are not happy with your purchase, you found an issue with Tailfind, or you have a question, please contact us at"},"features":{"kicker":"Why use Tailfind?","heading":"Improve your interface development flow","popoverTitle":"Useful popover keeps interaction attached to the selected element","popoverDescription":"The inline popover keeps key actions close, letting you refine selection and export the right fragment faster. The same actions are available as keyboard shortcuts, so you can keep moving without leaving the selection flow.","selectTitle":"Select the exact fragment","selectDescription":"Navigate the web page until the capture matches the boundary you actually want to reuse.","exportTitle":"Export plain Tailwind output","exportDescription":"Tailfind turns the selected fragment into readable Tailwind CSS you can refine instead of rebuilding from scratch.","extensionTitle":"Start capture from the extension popover","extensionDescription":"Pick an element to inspect, copy the whole page body, and configure the extension to match your workflow.","algorithmKicker":"AI learned algorithm","algorithmHeading":"Handles complex UI elements","supp
44ortsAnyCodebaseTitle":"Supports any codebase","supportsAnyCodebaseDescription":"Works across legacy frontends, modern component apps, and mixed production stacks without requiring a specific framework or styling setup.","combinesAllStylesTitle":"Combines all styles","combinesAllStylesDescription":"Reads authored classes and inline declarations together instead of treating them separately.","tailwindToTailwindTitle":"Tailwind to Tailwind","tailwindToTailwindDescription":"When the source already uses Tailwind, the output stays Tailwind-native and easier to refine.","supportsSvgTitle":"Supports SVG","supportsSvgDescription":"Inline vector graphics stay intact so icons, logos, and illustrations survive export.","removesNoiseTitle":"Removes redundant noise","removesNoiseDescription":"Keeps the generated markup focused by avoiding repetitive wrappers, duplicate declarations, and low-value styling clutter.","obfuscatedMarkupTitle":"Understands obfuscated markup","obfuscatedMarkupDescription":"Works with production pages where class names are compressed, generated, or not useful as a source of truth."},"useCases":{"kicker":"Tailfind use cases","heading":"Use the browser as the source of truth","description":"Tailfind helps when the real interface already exists and you need a faster way to turn it into editable Tailwind CSS.","legacyTitle":"Legacy UI rewrites","legacyDescription":"Use the shipped product as your reference, capture the exact block you need, and start the rewrite from real structure instead of screenshots and guesswork.","aiTitle":"Best UI input for AI","aiDescription":"Give AI clean Tailwind utilities instead of rough markup or screenshots, and get AI-generated code that lands much closer to the final result.","codeFirstTitle":"Design is a code-first process","codeFirstDescription":"When the browser is the most accurate design source, Tailfind lets you inspect the implementation itself and turn it into an editable Tailwind baseline.","prototypeTitle":"Prototyping from live interfaces","prototypeDescription":"Start from a real pattern already working in the browser, then remix the exported HTML in Tailwind Play or in your codebase without beginning from an empty file.","frameworksHeading":"Useful for developers who use frontend frameworks like"},"productSection":{"kicker":"Skip manual conversion","headingPrimary":"Convert live page","headingSecondary":"into Tailwind CSS","description":"Tailfind brings the converter to your browser, so you can capture production UI directly from the page you are viewing.","screenshotAlt":"App screenshot"}},"notFound":{"title":"Page not found","description":"The page may have moved, or the address may be incomplete. Tailfind is still ready when you need to capture a UI fragment or convert markup into Tailwind CSS.","goHome":"Go home","routes":"Tailfind routes","routesDescription":"Choose a useful page.","usefulRoutes":"Useful Tailfind routes","linksLabel":"Not found page links","product":"Product","productDescription":"Return to the Tailfind product overview.","converters":"Converters","convertersDescription":"Open the Tailwind converter workspace."},"seo":{"home":{"title":"Tailfind | Convert Live Page into Tailwind CSS","description":"Tailfind is a Chrome extension for converting live page, capturing selected UI, and exporting clean Tailwind CSS."},"htmlCssToTailwind":{"title":"HTML\u002FCSS to Tailwind Converter | Convert HTML and CSS to Tailwind","description":"Paste HTML and CSS, preview the rendered fragment, and export clean Tailwind CSS for Tailwind Play or your codebase."},"cssToTailwind":{"title":"CSS to Tailwind Converter | Convert CSS to Tailwind Classes","description":"Paste CSS declarations, preview generated utilities, and convert CSS into Tailwind classes for faster frontend migration work."},"bootstrapToTailwind":{"title":"Bootstrap to Tailwind Converter | Convert Bootstrap to Tailwind","description":"Paste Bootstrap 4 or 5 markup, compare the preview, and export Tailwind CSS for migration and rebuild work."},"terms":{"title":"Terms of Service | Tailfind","description":"Tailfind terms of service for product use, lifetime license purchases, activation, payments, refunds, and support."},"privacy":{"title":"Privacy Policy | Tailfind","description":"Tailfind privacy policy for website analytics, extension data, payments, license activation, support, and service providers."},"refund":{"title":"Refund Policy | Tailfind","description":"Tailfind refund policy with a 14-d
44ay refund period for lifetime license purchases."},"notFound":{"title":"Page Not Found | Tailfind","description":"The Tailfind page you requested could not be found. Return home or open a Tailwind converter."},"socialImageAlt":"Tailfind logo and brand mark"},"localeName":{"en":"English","de":"Deutsch","fr":"Français","es":"Español","es-419":"Español (Latinoamérica)","it":"Italiano","pt":"Português","pt-BR":"Português (Brasil)","nl":"Nederlands","sv":"Svenska","no":"Norsk","da":"Dansk","fi":"Suomalainen","pl":"Polski","ro":"RomânÄ","tr":"Türkçe","ru":"Ð ÑÑÑкий","uk":"УкÑаÑнÑÑка","ja":"æ¥æ¬èª","ko":"íêµì´","zh":"ç¹é«ä¸æ","zh-CN":"ç®ä½ä¸æ","hi":"हिà¤à¤¦à¥","id":"Bahasa Indonesia","vi":"Tiếng Viá»t","th":"à¹à¸à¸¢","ar":"عربÙ","cs":"ÄeÅ¡tina","he":"×¢×ר×ת","el":"Îλληνικά","hu":"Magyar"},"legal":{"lastUpdatedLabel":"Last updated:","terms":{"title":"Terms of Service","description":"These terms explain how you may use Tailfind, purchase a license, and access product updates.","lastUpdated":"April 24, 2026","sections":[{"heading":"Agreement","paragraphs":["These Terms of Service govern your access to and use of Tailfind, including the Tailfind website, Chrome extension, license activation, product updates, and support channels.","By purchasing, installing, activating, or using Tailfind, you agree to these terms. If you do not agree, do not use Tailfind."]},{"heading":"Product","paragraphs":["Tailfind is a developer tool for converting live website interfaces, selecting UI fragments, and exporting Tailwind CSS that can be copied into Tailwind Play or your own codebase.","Tailfind is provided for development, design, and conversion workflows. You are responsible for how you use exported code and for confirming that you have the right to inspect, copy, adapt, or reuse any third-party content, markup, design, or assets."]},{"heading":"License","paragraphs":["A lifetime license gives one purchaser ongoing access to the paid Tailfind features available under that license. Lifetime access means the license itself does not renew or expire on a subscription schedule.","A license may be activated on a reasonable number of devices or browser profiles for your own use. We may limit, suspend, or reset activations when we detect sharing, resale, automated abuse, fraud, refund abuse, or use that harms the product or other customers."]},{"heading":"Payments","paragraphs":["Payments may be processed by third-party billing providers, including Paddle and RevenueCat. The payment provider may act as merchant of record and may collect payment, tax, billing, and fraud-prevention information under its own terms and policies.","Prices are shown before checkout. Unless stated otherwise, prices are listed in USD and may be converted by your bank, card provider, or payment provider."]},{"heading":"Refunds","paragraphs":["Tailfind offers a 14-day refund period. To request a refund, contact [email protected] with the email address used for purchase and enough information for us to locate the order.","When a refund is issued, the related license and activations may be revoked. Refunds are handled through the original payment channel where possible."]},{"heading":"Acceptable Use","paragraphs":["You may not use Tailfind to violate laws, bypass access controls, scrape or copy content where you do not have permission, attack websites, distribute malware, or interfere with browser, website, or extension security.","You may not resell, sublicense, share, rent, lease, reverse engineer, or redistribute Tailfind except where applicable law gives you a non-waivable right to do so."]},{"heading":"Updates and Availability","paragraphs":["We may improve, change, add, or remove features over time. Some updates may be required for compatibility with Chrome, website platform changes, payment systems, or security requirements.","We aim to keep Tailfind useful and available, but we do not guarantee uninterrupted access, compatibility with every website, or perfect conversion output for every page."]},{"heading":"Disclaimers and Liability","paragraphs":["Tailfind is provided as is and as available. To the fullest extent allowed by law, we disclaim warranties of merchantability, fitness for a particular purpose, non-infringement, and error-free operation.","To the fullest extent allowed by law, Tailfind and its operator will not be liable for indirect, incidental, special, consequential, exemplary, or punitive damages, or for lost profits, lost data, lost business, or replacement services."]},{"heading":"Contact","paragraphs":["Questions about these terms can be sent to supp
44[email protected]."]}]},"privacy":{"title":"Privacy Policy","description":"This policy explains what Tailfind collects, why it is collected, and how privacy is handled across the website, extension, payments, and support.","lastUpdated":"April 24, 2026","sections":[{"heading":"Overview","paragraphs":["This Privacy Policy applies to Tailfind, including the Tailfind website, Chrome extension, license activation, purchase flow, and support communications.","We collect the minimum information needed to operate the product, process purchases, activate licenses, provide support, prevent abuse, and improve the website and product experience."]},{"heading":"Information You Provide","paragraphs":["When you purchase or activate Tailfind, we may receive your email address, license identifier, purchase status, country or tax region, and payment-provider order references.","When you contact support, we collect the information you send, such as your email address, message content, order details, screenshots, browser information, or diagnostic context you choose to include."]},{"heading":"Payment Information","paragraphs":["Payment details such as full card numbers are handled by third-party payment providers, including Paddle and RevenueCat. Tailfind does not store full payment card details on its own servers.","Payment providers may share limited purchase, refund, tax, and entitlement information with us so we can activate, verify, revoke, or support your license."]},{"heading":"Website Analytics","paragraphs":["The Tailfind website may use analytics tools such as Google Analytics to understand aggregate traffic, page views, referral sources, device categories, and similar usage patterns.","Analytics data helps us improve the website and understand whether visitors can find product, pricing, support, and policy information."]},{"heading":"Extension and Product Data","paragraphs":["Tailfind is designed for developer workflows inside your browser. The extension may process page structure, selected elements, generated HTML, and related styling information to provide inspection and export features.","When a feature requires a server-side service, license verification, activation, diagnostics, or support, related technical data may be sent to Tailfind systems or trusted service providers. Do not submit confidential or sensitive page content unless you are comfortable sharing it for that purpose."]},{"heading":"How We Use Information","paragraphs":["We use information to process purchases, activate licenses, verify entitlement status, provide refunds, answer support requests, prevent fraud or abuse, maintain security, troubleshoot issues, and improve Tailfind.","We do not sell your personal information. We do not use payment details or support messages for third-party advertising."]},{"heading":"Service Providers","paragraphs":["We may use trusted third-party providers for payments, license management, hosting, analytics, email, error diagnostics, and customer support. These providers process information only as needed to provide their services to Tailfind.","Providers may process information in countries other than your own. Where required, we rely on appropriate contractual, legal, or operational safeguards for those transfers."]},{"heading":"Retention","paragraphs":["We keep purchase, license, activation, refund, and support records for as long as needed to operate Tailfind, comply with legal obligations, resolve disputes, prevent abuse, and maintain accurate accounting records.","Support conversations and diagnostic details may be deleted earlier when they are no longer useful or legally required."]},{"heading":"Your Choices","paragraphs":["You can contact [email protected] to request access, correction, deletion, or export of personal information associated with your Tailfind purchase or support history.","Some records may need to be retained when required for tax, accounting, legal compliance, security, fraud prevention, or dispute resolution."]},{"heading":"Contact","paragraphs":["Privacy questions can be sent to supp
44[email protected]."]}]},"refund":{"title":"Refund Policy","description":"Tailfind offers a straightforward 14-day refund period for lifetime license purchases.","lastUpdated":"April 24, 2026","sections":[{"heading":"14-Day Refund Period","paragraphs":["Tailfind offers a 14-day refund period for lifetime license purchases. The 14-day period starts on the date of purchase shown by the payment provider.","You do not need to provide a detailed reason for the refund request, although feedback is welcome and helps us improve the product."]},{"heading":"How to Request a Refund","paragraphs":["Email [email protected] from the email address used for purchase, or include the purchase email, order ID, receipt number, or other details that let us identify the transaction.","We may ask for additional information only when needed to locate the order, prevent fraud, or process the refund through the payment provider."]},{"heading":"Processing","paragraphs":["Approved refunds are sent back through the original payment method where possible. Processing time depends on the payment provider, card network, bank, and country.","Currency conversion differences, bank fees, or card issuer fees are controlled by your payment provider or bank and may not be refundable by Tailfind."]},{"heading":"License Access After Refund","paragraphs":["After a refund is issued, the Tailfind license connected to that purchase may be disabled, and existing activations may stop working.","If you purchase Tailfind again later, a new license or activation may be required."]},{"heading":"Exceptions","paragraphs":["Refund requests made after the 14-day period may be declined unless required by applicable law or approved at our discretion.","We may decline refund requests connected to fraud, chargeback abuse, resale, unauthorized sharing, or other misuse of Tailfind."]},{"heading":"Contact","paragraphs":["Refund questions can be sent to supp
44[email protected]. Please include your purchase email or order reference so we can respond faster."]}]}},"converters":{"tabs":{"htmlCss":"HTML\u002FCSS to Tailwind","css":"CSS to Tailwind","bootstrap":"Bootstrap to Tailwind"},"common":{"inputPanel":"Converter input","outputPanel":"Converter output","prefixLabel":"Prefix","unitsLabel":"Units","sourceEditor":"Source editor","sourcePreview":"Source preview","outputPreview":"Generated Tailwind preview","outputPreviewEmptyTitle":"No Tailwind preview","outputPreviewEmptyMessage":"Generated Tailwind preview appears here after conversion.","noOutputTitle":"No output yet","noOutputDescription":"Generated Tailwind output appears here automatically.","copyHtml":"Copy HTML","copyingHtml":"Copying HTML","copyClasses":"Copy classes","copyingClasses":"Copying classes","openTailwindPlay":"Open in Tailwind Play","openingTailwindPlay":"Opening Tailwind Play","converterError":"Converter error","classesReady":"Class list ready","htmlReady":"Tailwind CSS ready","copiedClasses":"Copied classes","copiedHtml":"Copied HTML","copiedClassesDescription":"Generated Tailwind classes are on your clipboard.","copiedHtmlDescription":"Generated Tailwind CSS is on your clipboard.","openedTailwindPlay":"Opened in Tailwind Play","openedTailwindPlayDescription":"Generated Tailwind CSS is ready to edit.","convertErrorFallback":"Tailfind could not convert this input.","copyClassesError":"Could not copy the generated classes.","copyHtmlError":"Could not copy the generated HTML.","openTailwindPlayError":"Could not open Tailwind Play.","addElementError":"Add an element to the input before converting.","prepareHtmlError":"Tailfind could not prepare Tailwind CSS for this input.","clipboardUnavailable":"Clipboard access is unavailable in this browser.","browserOnlyConverter":"The converter can run only in a browser.","browserOnlyPreview":"The preview can run only in a browser.","browserOnlyTailwindPlay":"Tailwind Play can be opened only in a browser.","sourcePreviewEmptyTitle":"No source preview","sourcePreviewEmptyMessage":"Source preview appears when the input is valid."},"css":{"heading":"CSS to Tailwind Converter","description":"Paste a CSS declaration block and convert the rendered sample into Tailwind classes you can copy into components.","primaryInputLabel":"CSS declaration block","primaryInputHelp":"Paste declarations only. Tailfind applies them to a sample element and exports Tailwind CSS.","sandboxTitle":"CSS conversion sandbox","sampleBlock":"Sample block","sampleText":"Compact preview text.","overview":{"eyebrow":"CSS converter guide","heading":"Turn CSS declarations into Tailwind utilities","paragraphs":["The CSS to Tailwind converter turns a declaration block into the closest portable Tailwind utility classes. It is useful for one-off design tokens, inline style cleanup, and moving small CSS snippets into component markup.","Tailfind applies the declarations to a sample element before conversion, so layout, spacing, color, border, shadow, typography, and sizing values are interpreted through the same browser rendering path used by the extension.","Use it to convert CSS properties to Tailwind classes, check which values map to the default Tailwind scale, and keep non-default values explicit as arbitrary utilities."]},"faq":[{"question":"Can it convert CSS to Tailwind?","answer":"Yes. Paste a CSS declaration block and Tailfind applies it to a sample element before exporting the closest Tailwind class list."},{"question":"Are custom values preserved?","answer":"Tailfind maps values to default Tailwind utilities when possible and keeps non-default values visible as arbitrary utilities instead of hiding them."},{"question":"Should I paste a full stylesheet?","answer":"The CSS converter is designed for declaration blocks. Use the HTML\u002FCSS converter when selectors, classes, nested markup, or a fuller stylesheet are needed."}],"features":{"kicker":"Pixel-perfect Tailwind converter","heading":"Convert CSS into clean Tailwind classes","items":[{"title":"Declaration-first conversion","description":"Paste a CSS declaration block and Tailfind applies it to a sample element before converting the rendered result into reusable Tailwind classes."},{"title":"Default utility preference","description":"Portable Tailwind defaults are preserved when declaration values match the framework scale."},{"title":"Arbitrary value fallback","description":"Non-default values become explicit arbitrary utilities so custom pixels, colors, shadows, and timing are easy to inspect."},{"title":"Layout-safe output","description":"Spacing, sizing, display, grid, flex, borders, shadows, and typography are mapped from the rendered sample."},{"title":"Fast class extraction","description":"The output is a focused Tailwind class list that is ready to copy into a component, token spike, or cleanup pass."}
44,{"title":"Good for audits","description":"Use it to replace one-off CSS blocks, inline style experiments, and design-system prototypes with clearer Tailwind utilities."}]}},"htmlCss":{"heading":"HTML\u002FCSS to Tailwind Converter","description":"Paste HTML and CSS, preview the rendered fragment, and export clean Tailwind CSS for Tailwind Play or your codebase.","primaryInputLabel":"HTML","secondaryInputLabel":"CSS","primaryInputHelp":"Paste the HTML fragment you want to convert.","secondaryInputHelp":"Paste CSS that should be applied to the HTML fragment.","sandboxTitle":"HTML\u002FCSS conversion sandbox","overview":{"eyebrow":"HTML\u002FCSS converter guide","heading":"Convert HTML and CSS into Tailwind","paragraphs":["The HTML\u002FCSS to Tailwind converter is built for pasted UI fragments, landing page sections, prototypes, and legacy templates where styles are split between selectors, classes, and inline declarations.","Tailfind renders the markup with its CSS, reads the computed result, and exports Tailwind CSS so you can move the same structure into Tailwind projects without manually translating every declaration.","Use it when you need fast HTML to Tailwind CSS conversion, a cleaner Tailwind Play handoff, or a starting point for rebuilding static components in Angular, React, Vue, Svelte, or plain HTML."]},"faq":[{"question":"Can Tailfind convert HTML and CSS to Tailwind CSS?","answer":"Yes. Paste an HTML fragment and its CSS, and Tailfind renders the result before exporting regular HTML with Tailwind utility classes."},{"question":"Does the converter keep custom CSS values?","answer":"Tailfind prefers default Tailwind utilities when values match the framework scale and uses explicit arbitrary utilities for custom colors, spacing, shadows, and sizes."},{"question":"What kind of HTML works best?","answer":"Small, self-contained UI fragments work best, including cards, forms, sections, prototypes, and legacy snippets where the relevant CSS can be pasted with the markup."}],"features":{"kicker":"Pixel-perfect Tailwind converter","heading":"Convert HTML and CSS into clean Tailwind CSS","items":[{"title":"Reads HTML and CSS together","description":"Selectors, classes, inline styles, and nested rules are resolved against the actual markup before Tailwind utilities are generated."},{"title":"Keeps meaningful markup","description":"Semantic structure, attributes, text, links, and form elements stay in the exported HTML while styling moves to utilities."},{"title":"Preview-backed conversion","description":"Source and generated previews make it easier to compare the original fragment with the Tailwind output."},{"title":"Nested element coverage","description":"Child elements, SVGs, icons, and composed UI fragments are converted with the surrounding style context."},{"title":"Useful for component rebuilds","description":"Migrate copied UI fragments, prototypes, and static snippets into Tailwind components without losing the original HTML shape."},{"title":"Tailwind Play handoff","description":"Generated Tailwind CSS can open directly in Tailwind Play for quick edits, experiments, and sharing."}]}},"bootstrap":{"heading":"Bootstrap to Tailwind Converter","description":"Paste Bootstrap 4 or 5 markup, compare the preview, and export Tailwind CSS for migration and rebuild work.","primaryInputLabel":"Bootstrap HTML","primaryInputHelp":"Paste Bootstrap markup and choose the Bootstrap version used by the source.","sandboxTitle":"Bootstrap conversion sandbox","versionLabel":"Bootstrap version","sourcePreviewEmptyMessage":"Source preview appears when the Bootstrap HTML is valid.","overview":{"eyebrow":"Bootstrap migration guide","heading":"Move Bootstrap components into Tailwind projects","paragraphs":["The Bootstrap to Tailwind converter helps move Bootstrap 4 and Bootstrap 5 markup into Tailwind projects without rewriting every component class by hand.","Tailfind loads the selected Bootstrap version, previews the source component, and exports regular HTML with Tailwind utilities for cards, buttons, badges, forms, grids, spacing, and typography.","Use it for Bootstrap migration work, Tailwind rebuilds, or quick component translation when you want a readable starting point that can be refined inside your own design system."]},"faq":[{"question":"Can Tailfind convert Bootstrap 4 and Bootstrap 5 to Tailwind?","answer":"Yes. Choose Bootstrap 4 or Bootstrap 5, paste the markup, and Tailfind loads the matching Bootstrap CSS before exporting Tailwind CSS."},{"question":"Can I compare the Bootstrap source with the Tailwind result?","answer":"Yes. The converter shows a source preview and a generated Tailwind preview so migration work can be checked before copying the output."},{"question":"Is the Bootstrap output ready for production?","answer":"The output is a readable Tailwind starting point for migration and rebuild work. Review it inside your own design system before shipping production UI."}],"features":{"kicker":"Pixel-perfect Tailwind converter","heading":"Convert Bootstrap components into clean Tailwind CSS","items":[{"title":"Version-aware conversion","description":"Choose Bootstrap 4 or 5 so Tailfind applies the right source framework assumptions before generating Tailwind output."},{"title":"Component class translation","description":"Cards, badges, alerts, buttons, forms, spacing utilities, and text utilities get translated into plain Tailwind CSS."},{"title":"Preview-backed cleanup","description":"Source and generated previews help compare the Bootstrap input against the Tailwind output before you copy."},{"title":"Grid and spacing migration","description":"Bootstrap layout fragments and utility spacing become readable Tailwind classes that are easier to tune."},{"title":"Output is SPA-ready","description":"The result is regular HTML with Tailwind utilities, ready to move into Angular templates, React components, and other frontend stacks."},{"title":"Tailwind Play handoff","description":"Generated Tailwind CSS can open directly in Tailwind Play for quick edits, experiments, and sharing."}]}}}},"__nghData__":[{},{"t":{"1":"t2","2":"t3"},"c":{"1":[],"2":[{"i":"t3","r":3,"t":{"2":"t4"},"c":{"2":[{"i":"t4","r":1}]}}]}}
44,{"t":{"11":"t0","18":"t5","19":"t6"},"c":{"11":[{"i":"t0","r":1,"t":{"10":"t1"},"c":{"10":[{"i":"t1","r":1,"x":5}]}},{"i":"t0","r":1,"t":{"10":"t1"},"c":{"10":[{"i":"t1","r":1,"x":3}]}}],"18":[],"19":[{"i":"t6","r":1}]}},{"t":{"2":"t7"},"c":{"2":[{"i":"t7","r":1,"x":2}]}},{"t":{"1":"t2","2":"t3"},"c":{"1":[],"2":[{"i":"t3","r":2,"t":{"2":"t4"},"c":{"2":[]}}]}},{"t":{"13":"t8"},"c":{"13":[{"i":"t8","r":1,"x":6}]}},{"t":{"14":"t10"},"c":{"14":[{"i":"t10","r":1,"t":{"2":"t11"},"c":{"2":[{"i":"t11","r":1}]}},{"i":"t10","r":1,"t":{"2":"t11"},"c":{"2":[]},"x":30}]}},{"t":{"11":"t9"},"c":{"11":[{"i":"t9","r":1,"x":3}]}},{"t":{"17":"t12"},"c":{"17":[{"i":"t12","r":1,"t":{"6":"t13"},"c":{"6":[{"i":"t13","r":1,"x":5}]}},{"i":"t12","r":1,"t":{"6":"t13"},"c":{"6":[{"i":"t13","r":1,"x":3}]}}]}},{"t":{"0":"t14"},"c":{"0":[]}},{"t":{"0":"t15"},"c":{"0":[]}},{"c":{"2":[{"i":"c2334531802","r":1}]}}]}</script>
44</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.