[{"data":1,"prerenderedAt":649},["ShallowReactive",2],{"\u002Fresources\u002Ftailwind":3,"navigation":550},{"id":4,"title":5,"body":6,"description":536,"extension":537,"meta":538,"navigation":542,"path":546,"seo":547,"stem":548,"__hash__":549},"content\u002Fresources\u002Ftailwind.md","Free Tailwind CSS Templates & Components (HTML, React, Vue)",{"type":7,"value":8,"toc":534},"minimark",[9,70,530],[10,11,14,63],"block",{":centered":12,"heading-tag":13},"true","h1",[15,16,17,21,26,33,39,45,51,57],"t-typography",{},[18,19,20],"p",{},"Production-ready Tailwind CSS components for your next project. Copy, paste, and customize these modern UI elements built with Tailwind CSS. Available in HTML, React, and Vue.",[22,23,25],"h2",{"id":24},"why-use-our-tailwind-templates","Why Use Our Tailwind Templates?",[18,27,28,32],{},[29,30,31],"strong",{},"Free & Open"," - All templates are completely free to use in any project",[18,34,35,38],{},[29,36,37],{},"Framework Agnostic"," - Available in vanilla HTML, React, and Vue versions",[18,40,41,44],{},[29,42,43],{},"Responsive by Default"," - Mobile-first design that looks great on all devices",[18,46,47,50],{},[29,48,49],{},"Production Ready"," - Clean, maintainable code following best practices",[18,52,53,56],{},[29,54,55],{},"Copy & Paste"," - No installation required, just copy the code you need",[18,58,59,62],{},[29,60,61],{},"Fully Customizable"," - Easily modify colors, spacing, and styles to match your brand",[64,65,67],"template",{"v-slot:title":66},"",[18,68,69],{},"Free Tailwind CSS Templates",[10,71,72],{":centered":12},[15,73,74,78,81,86,126,130,137,265,269,272,308,312,315,319,322,355,359,365,369,373,379,385,391,397,403,407,421,435,441,453,463,467,473,479,485,491,497,501,504,507,527],{},[22,75,77],{"id":76},"getting-started-with-tailwind-css","Getting Started with Tailwind CSS",[18,79,80],{},"If you're new to Tailwind CSS, here's how to get started:",[82,83,85],"h3",{"id":84},"_1-install-tailwind-css","1. Install Tailwind CSS",[87,88,92],"pre",{"className":89,"code":90,"language":91,"meta":66,"style":66},"language-bash shiki shiki-themes catppuccin-mocha","npm install -D tailwindcss\nnpx tailwindcss init\n","bash",[93,94,95,114],"code",{"__ignoreMap":66},[96,97,100,104,108,111],"span",{"class":98,"line":99},"line",1,[96,101,103],{"class":102},"sO0CG","npm",[96,105,107],{"class":106},"sX9bP"," install",[96,109,110],{"class":106}," -D",[96,112,113],{"class":106}," tailwindcss\n",[96,115,117,120,123],{"class":98,"line":116},2,[96,118,119],{"class":102},"npx",[96,121,122],{"class":106}," tailwindcss",[96,124,125],{"class":106}," init\n",[82,127,129],{"id":128},"_2-configure-tailwind","2. Configure Tailwind",[18,131,132,133,136],{},"Add the paths to all of your template files in ",[93,134,135],{},"tailwind.config.js",":",[87,138,142],{"className":139,"code":140,"language":141,"meta":66,"style":66},"language-js shiki shiki-themes catppuccin-mocha","\u002F** @type {import('tailwindcss').Config} *\u002F\nmodule.exports = {\n  content: [\n    \".\u002Fsrc\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n","js",[93,143,144,171,190,202,211,219,229,240,246,259],{"__ignoreMap":66},[96,145,146,150,154,158,161,165,168],{"class":98,"line":99},[96,147,149],{"class":148},"sEwFu","\u002F** ",[96,151,153],{"class":152},"sqv1J","@",[96,155,157],{"class":156},"sTa83","type",[96,159,160],{"class":152}," {",[96,162,164],{"class":163},"shU6S","import('tailwindcss').Config",[96,166,167],{"class":152},"}",[96,169,170],{"class":148}," *\u002F\n",[96,172,173,177,181,184,187],{"class":98,"line":116},[96,174,176],{"class":175},"smm7R","module",[96,178,180],{"class":179},"sMC71",".",[96,182,183],{"class":175},"exports",[96,185,186],{"class":179}," =",[96,188,189],{"class":152}," {\n",[96,191,193,197,199],{"class":98,"line":192},3,[96,194,196],{"class":195},"sYma7","  content",[96,198,136],{"class":179},[96,200,201],{"class":195}," [\n",[96,203,205,208],{"class":98,"line":204},4,[96,206,207],{"class":106},"    \".\u002Fsrc\u002F**\u002F*.{html,js,jsx,ts,tsx,vue}\"",[96,209,210],{"class":152},",\n",[96,212,214,217],{"class":98,"line":213},5,[96,215,216],{"class":195},"  ]",[96,218,210],{"class":152},[96,220,222,225,227],{"class":98,"line":221},6,[96,223,224],{"class":195},"  theme",[96,226,136],{"class":179},[96,228,189],{"class":152},[96,230,232,235,237],{"class":98,"line":231},7,[96,233,234],{"class":195},"    extend",[96,236,136],{"class":179},[96,238,239],{"class":152}," {},\n",[96,241,243],{"class":98,"line":242},8,[96,244,245],{"class":152},"  },\n",[96,247,249,252,254,257],{"class":98,"line":248},9,[96,250,251],{"class":195},"  plugins",[96,253,136],{"class":179},[96,255,256],{"class":195}," []",[96,258,210],{"class":152},[96,260,262],{"class":98,"line":261},10,[96,263,264],{"class":152},"}\n",[82,266,268],{"id":267},"_3-add-tailwind-directives","3. Add Tailwind Directives",[18,270,271],{},"Add the Tailwind directives to your main CSS file:",[87,273,277],{"className":274,"code":275,"language":276,"meta":66,"style":66},"language-css shiki shiki-themes catppuccin-mocha","@tailwind base;\n@tailwind components;\n@tailwind utilities;\n","css",[93,278,279,290,299],{"__ignoreMap":66},[96,280,281,284,287],{"class":98,"line":99},[96,282,283],{"class":156},"@tailwind",[96,285,286],{"class":195}," base",[96,288,289],{"class":152},";\n",[96,291,292,294,297],{"class":98,"line":116},[96,293,283],{"class":156},[96,295,296],{"class":195}," components",[96,298,289],{"class":152},[96,300,301,303,306],{"class":98,"line":192},[96,302,283],{"class":156},[96,304,305],{"class":195}," utilities",[96,307,289],{"class":152},[82,309,311],{"id":310},"_4-start-using-templates","4. Start Using Templates",[18,313,314],{},"Browse our template collection above and copy the code you need!",[22,316,318],{"id":317},"available-templates","Available Templates",[18,320,321],{},"Explore our collection of production-ready Tailwind CSS components:",[323,324,325,334,341,348],"ul",{},[326,327,328,333],"li",{},[329,330,332],"a",{"href":331},"\u002Fresources\u002Ftailwind\u002Fhero","Hero Sections"," - Eye-catching landing page headers",[326,335,336,340],{},[329,337,339],{"href":338},"\u002Fresources\u002Ftailwind\u002Fnavbar","Responsive Navbar"," - Modern navigation with mobile menu",[326,342,343,347],{},[329,344,346],{"href":345},"\u002Fresources\u002Ftailwind\u002Fcards","Feature Cards"," - Grid layouts showcasing your features",[326,349,350,354],{},[329,351,353],{"href":352},"\u002Fresources\u002Ftailwind\u002Fform","Contact Form"," - Beautiful, accessible contact forms",[22,356,358],{"id":357},"component-categories","Component Categories",[18,360,361,364],{},[29,362,363],{},"Navigation"," - Responsive navbars, sidebars, and menus",[18,366,367,333],{},[29,368,332],{},[18,370,371,347],{},[29,372,346],{},[18,374,375,378],{},[29,376,377],{},"Forms"," - Beautiful, accessible contact and signup forms",[18,380,381,384],{},[29,382,383],{},"Pricing Tables"," - Flexible pricing section layouts",[18,386,387,390],{},[29,388,389],{},"Testimonials"," - Customer review and testimonial displays",[18,392,393,396],{},[29,394,395],{},"Footers"," - Comprehensive footer sections with links",[18,398,399,402],{},[29,400,401],{},"CTAs"," - Call-to-action sections that convert",[22,404,406],{"id":405},"customization-tips","Customization Tips",[18,408,409,412,413,416,417,420],{},[29,410,411],{},"Colors"," - Easily change color schemes by modifying Tailwind color classes (e.g., ",[93,414,415],{},"bg-blue-600"," to ",[93,418,419],{},"bg-purple-600",")",[18,422,423,426,427,430,431,434],{},[29,424,425],{},"Spacing"," - Adjust padding and margins with Tailwind's spacing scale (",[93,428,429],{},"p-4",", ",[93,432,433],{},"m-8",", etc.)",[18,436,437,440],{},[29,438,439],{},"Typography"," - Modify text sizes, weights, and families to match your brand",[18,442,443,446,447,430,450,434],{},[29,444,445],{},"Breakpoints"," - Tailwind's responsive prefixes make it easy to adjust layouts (",[93,448,449],{},"md:",[93,451,452],{},"lg:",[18,454,455,458,459,462],{},[29,456,457],{},"Dark Mode"," - Add dark mode support with the ",[93,460,461],{},"dark:"," variant",[22,464,466],{"id":465},"best-practices","Best Practices",[18,468,469,472],{},[29,470,471],{},"Mobile-First"," - Always design for mobile first, then enhance for larger screens",[18,474,475,478],{},[29,476,477],{},"Semantic HTML"," - Use proper HTML elements for better accessibility and SEO",[18,480,481,484],{},[29,482,483],{},"Consistent Spacing"," - Stick to Tailwind's spacing scale for visual harmony",[18,486,487,490],{},[29,488,489],{},"Component Reusability"," - Extract repeated patterns into reusable components",[18,492,493,496],{},[29,494,495],{},"Performance"," - Use PurgeCSS (built into Tailwind) to remove unused styles in production",[22,498,500],{"id":499},"need-custom-development","Need Custom Development?",[18,502,503],{},"While these templates are great for getting started, sometimes you need a fully custom solution tailored to your specific needs.",[18,505,506],{},"We offer professional web development services including:",[323,508,509,512,515,518,521,524],{},[326,510,511],{},"Custom Tailwind CSS development",[326,513,514],{},"React\u002FVue\u002FNext.js applications",[326,516,517],{},"Full-stack web applications",[326,519,520],{},"UI\u002FUX design and implementation",[326,522,523],{},"Performance optimization",[326,525,526],{},"Ongoing maintenance and support",[528,529],"contact-form",{},[531,532,533],"style",{},"html pre.shiki code .sEwFu, html code.shiki .sEwFu{--shiki-default:#9399B2;--shiki-default-font-style:italic}html pre.shiki code .sqv1J, html code.shiki .sqv1J{--shiki-default:#9399B2}html pre.shiki code .sTa83, html code.shiki .sTa83{--shiki-default:#CBA6F7}html pre.shiki code .shU6S, html code.shiki .shU6S{--shiki-default:#F9E2AF;--shiki-default-font-style:italic}html pre.shiki code .smm7R, html code.shiki .smm7R{--shiki-default:#CBA6F7;--shiki-default-font-style:italic}html pre.shiki code .sMC71, html code.shiki .sMC71{--shiki-default:#94E2D5}html pre.shiki code .sYma7, html code.shiki .sYma7{--shiki-default:#CDD6F4}html pre.shiki code .sX9bP, html code.shiki .sX9bP{--shiki-default:#A6E3A1}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sO0CG, html code.shiki .sO0CG{--shiki-default:#89B4FA;--shiki-default-font-style:italic}",{"title":66,"searchDepth":116,"depth":116,"links":535},[],"Free, production-ready Tailwind CSS components and templates in HTML, React, and Vue. Copy, paste, and customize responsive UI elements for your next project.","md",{"ogImage":539},{"props":540},{"title":69,"description":541},"HTML • React • Vue — copy, paste, customize",{"order":116,"title":543,"icon":544,"description":545},"Tailwind Templates","teenyicons:tailwind-solid","Free Tailwind CSS components and templates","\u002Fresources\u002Ftailwind",{"title":5,"description":536},"resources\u002Ftailwind","cBiXm5yapMXxlmjvxlIycqxtVYc6Jj8phXSJxWnfDEM",[551,555,595,616,645],{"title":552,"path":553,"stem":554,"to":553},"About Us","\u002Fabout","about",{"title":556,"path":557,"stem":558,"children":559,"type":594,"to":557},"Resources","\u002Fresources","resources",[560,566,572,583,589],{"title":561,"path":562,"stem":563,"order":204,"icon":564,"description":565,"to":562},"DIY vs Agency","\u002Fresources\u002Fdiy-vs-agency","resources\u002Fdiy-vs-agency","heroicons:scale","When a website builder is enough — and when it isn’t",{"title":567,"path":568,"stem":569,"order":99,"icon":570,"description":571,"to":568},"Favicon Generator","\u002Fresources\u002Ffavicon","resources\u002Ffavicon","heroicons:photo","Free online favicon generator for all sizes and formats",{"title":543,"path":546,"stem":548,"children":573,"order":116,"icon":544,"description":545,"to":546},[574,577,579,581],{"title":575,"path":345,"stem":576,"to":345},"Feature Cards Grid","resources\u002Ftailwind\u002Fcards",{"title":353,"path":352,"stem":578,"to":352},"resources\u002Ftailwind\u002Fform",{"title":332,"path":331,"stem":580,"to":331},"resources\u002Ftailwind\u002Fhero",{"title":339,"path":338,"stem":582,"to":338},"resources\u002Ftailwind\u002Fnavbar",{"title":584,"path":585,"stem":586,"order":192,"icon":587,"description":588,"to":585},"Website Cost Guide","\u002Fresources\u002Fwebsite-cost","resources\u002Fwebsite-cost","heroicons:currency-dollar","What a small business website really costs in 2026",{"title":590,"path":591,"stem":592,"order":213,"icon":570,"description":593,"to":591},"WYSIWYG Editor","\u002Fresources\u002Fwysiwyg","resources\u002Fwysiwyg","Powerful visual editor coming soon","megamenu",{"title":596,"path":597,"stem":598,"children":599,"order":99,"to":597},"Showcases","\u002Fshowcases","showcases",[600,604,608,612],{"title":601,"path":602,"stem":603,"to":602},"OCAutoAid","\u002Fshowcases\u002Focautoaid","showcases\u002F1.ocautoaid",{"title":605,"path":606,"stem":607,"to":606},"Aladdin","\u002Fshowcases\u002Faladdin","showcases\u002F2.aladdin",{"title":609,"path":610,"stem":611,"to":610},"P&J Cleaners","\u002Fshowcases\u002Fpj-cleaners","showcases\u002F3.pj-cleaners",{"title":613,"path":614,"stem":615,"to":614},"Laelia Wellness","\u002Fshowcases\u002Flaelia","showcases\u002F4.laelia",{"title":617,"path":618,"stem":619,"children":620,"order":99,"type":594,"to":618},"Solutions","\u002Fsolutions","solutions",[621,627,633,639],{"title":622,"path":623,"stem":624,"icon":625,"description":626,"to":623},"Automotive Websites","\u002Fsolutions\u002Fautomotive","solutions\u002Fautomotive","material-symbols:car-repair-sharp","Professional websites for automotive businesses that drive results",{"title":628,"path":629,"stem":630,"icon":631,"description":632,"to":629},"Shopify Store Development","\u002Fsolutions\u002Fshopify-store","solutions\u002Fshopify-store","mdi:shopify","Professional Shopify store setup and custom development",{"title":634,"path":635,"stem":636,"icon":637,"description":638,"to":635},"Vibecoding Project Recovery","\u002Fsolutions\u002Fvibecoding-rescue","solutions\u002Fvibecoding-rescue","icon-park-solid:tools","Professional rescue and refinement of AI-generated code projects",{"title":640,"path":641,"stem":642,"icon":643,"description":644,"to":641},"WebFlow Templates","\u002Fsolutions\u002Fwebflow","solutions\u002Fwebflow","icon-park-solid:page-template","Professional Webflow development and custom template solutions",{"title":646,"path":647,"stem":648,"order":116,"to":647},"Contact","\u002Fcontact-us","contact-us",1783111127015]