使用 Tailwind CSS 必须知道的 24 个组件库

<section id="nice" style="padding-right: 10px; padding-left: 10px; line-height: 1.6; word-break: break-word; overflow-wrap: break-word; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, &quot;PingFang SC&quot;, Cambria, Cochin, Georgia, Times, &quot;Times New Roman&quot;, serif; font-size: 15px; letter-spacing: 0.05em; color: rgb(89, 89, 89);"><h2 style="min-height: 32px; line-height: 28px; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152); border-top-color: rgb(119, 48, 152); border-right-color: rgb(119, 48, 152); border-left-color: rgb(119, 48, 152); font-size: 22px; margin: 1em auto; padding-top: 0.5em; padding-bottom: 0.5em; text-align: center; width: 85%; font-weight: bold; display: flex; flex-direction: column; justify-content: center;">使用 Tailwind CSS 必须知道的 24 个组件库</h2> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">本文介绍 20 个最佳 Tailwind CSS 组件库</p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">Tailwind 是一个实用程序优先的 CSS 框架，提供了一整套预先设计的样式和组件，使您可以轻松创建令人惊叹的 UI，而无需自定义 CSS。</p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">然而，即使拥有 Tailwind 大量的预先设计的样式，从头开始构建网站或应用程序仍然是一项艰巨的任务。这就是 Tailwind 组件库派上用场的地方。在本文中，我们将探索 2023 年 24 个最佳免费 Tailwind CSS 组件库，每个库都提供一组独特的组件，帮助您更快、更高效地构建下一个项目。无论您是经验丰富的 Web 开发人员还是刚刚入门，这些组件库都将使您的工作流程更加顺畅和愉快。</p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">该列表还在不断丰富种， 最新更新将发布在<a href="http://www.pengtech.net/sass/tailwind_best_component_libs.html" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">24 个最佳 Tailwind CSS 组件库</a>， 另外我们希望得到您的反馈， 以便我们给各组件库一个公道的评价。 推荐指数从一星到五星， 你会给您接触过的组件库几颗星并给出您的看法， 欢迎到原文下方留言。</p> <h2 style="min-height: 32px; line-height: 28px; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152); border-top-color: rgb(119, 48, 152); border-right-color: rgb(119, 48, 152); border-left-color: rgb(119, 48, 152); font-size: 22px; margin: 1em auto; padding-top: 0.5em; padding-bottom: 0.5em; text-align: center; width: 85%; font-weight: bold; display: flex; flex-direction: column; justify-content: center;">Tailwind css 组件库列表</h2> <ol style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black;"> <li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailwindui.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailwind UI</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tw-elements.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailwind Elements</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailwindcomponents.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailwind Components</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://floatui.com" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Float UI Components</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.tailwindtoolbox.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailwind Toolbox</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://flowbite.com" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Flowbite UI Kit</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://saasblocks.app" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Saas Blocks</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://ui.shadcn.com/docs" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">shadcn/ui</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.tailwind-kit.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailwind UI Kit</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://merakiui.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Meraki UI</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://daisyui.com" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Daisy UI</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.material-tailwind.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Material Tailwind</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://wind-ui.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">WindUI</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailblocks.cc/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailblocks</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailwind-starter-kit.vercel.app/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailwind Starter Kit</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.devwares.com/windframe/blocks" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Windframe Blocks</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailkit.com" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailkit</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailgrids.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailgrids Component library</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://mambaui.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Mamba UI</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://flowrift.com/c/blog" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Flowrift UI Blocks</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://preline.co/index.html" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Preline UI Components</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.hyperui.dev/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Hyper UI</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tocinocode.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tocinocode UI Components</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://headlessui.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Headless UI</a></p> </section></li></ol> <h2 style="min-height: 32px; line-height: 28px; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152); border-top-color: rgb(119, 48, 152); border-right-color: rgb(119, 48, 152); border-left-color: rgb(119, 48, 152); font-size: 22px; margin: 1em auto; padding-top: 0.5em; padding-bottom: 0.5em; text-align: center; width: 85%; font-weight: bold; display: flex; flex-direction: column; justify-content: center;">Tailwind css 模板库列表</h2> <ul style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black;"> <li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.tailwindawesome.com" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailwind Awesome</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailwindui.com/templates" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailwind UI 模板库</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">模板类型包括：spotlight, salient, Protocal, Commit(changelog), Primer, Studio, Pocket, Transmit, Syntax, Keynote</p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://floatui.com/templates" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Float UI 模板库</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">模板类型包括：Mailgo, IO Academy, Starboard, Split, Blinder</p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://floatui.com/demo" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">more template</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.tailwindtoolbox.com/starter-templates" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailwind Toolbox 模板库</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">模板类型包括：Admin, Landing page, Blog, store, Support, Portfolio, Navigation, Login, Starter</p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://merakiui.com/templates" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Meraki ui 模板库</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">模板类型包括：Dashboard, Hero Header, Blog</p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailgrids.com/templates" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Tailgrids ui 模板库</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">模板类型包括：Dashboard, Blog, Agency, Business, Saas, Startup, Ecommerce, Dashboard</p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.tailwind-kit.com/templates#dashboard" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">tailwind kit 模板库</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">模板类型包括：Landing page, Dashboard, Error Page</p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://mambaui.com/templates" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Mamba ui 模板库</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">模板类型包括：Business, Portfolio</p> </section></li></ul> <h2 style="min-height: 32px; line-height: 28px; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152); border-top-color: rgb(119, 48, 152); border-right-color: rgb(119, 48, 152); border-left-color: rgb(119, 48, 152); font-size: 22px; margin: 1em auto; padding-top: 0.5em; padding-bottom: 0.5em; text-align: center; width: 85%; font-weight: bold; display: flex; flex-direction: column; justify-content: center;">tailwind 博客列表</h2> <ul style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black;"> <li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailwindcomponents.com/discover" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">tailwindcomponents discover</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailwindcomponents.com/blog" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">tailwindcomponents blog</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.material-tailwind.com/blog" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">material-tailwind blog</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.devwares.com/blog/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">windframe blog</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailkit.com/blog" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">tailkit blog</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tailgrids.com/blog" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">tailgrids blog</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://www.hyperui.dev/blog" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Hyperui blog</a></p> </section></li><li><section style="line-height: 26px; color: rgb(1, 1, 1); margin-top: 10px; margin-bottom: 10px;"><p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://tocinocode.com/blog/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">tocinocode blog</a></p> </section></li></ul> <h2 style="min-height: 32px; line-height: 28px; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152); border-top-color: rgb(119, 48, 152); border-right-color: rgb(119, 48, 152); border-left-color: rgb(119, 48, 152); font-size: 22px; margin: 1em auto; padding-top: 0.5em; padding-bottom: 0.5em; text-align: center; width: 85%; font-weight: bold; display: flex; flex-direction: column; justify-content: center;">推荐</h2> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">Landing page templates:</p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://play-tailwind.tailgrids.com/" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">Play - Free Tailwind CSS SaaS Template</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">Blog templates:</p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://saasblocks.app/docs/components/blog" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">SaaS blocks Blog</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">Auth templates:</p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://saasblocks.app/docs/screens/auth" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">SaaS blocks Auth</a></p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;">Settings <a href="https://philoenglish.com/word/search/template" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">templates</a>:</p> <p style="font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;"><a href="https://saasblocks.app/docs/screens/settings" style="overflow-wrap: break-word; font-weight: bold; color: rgb(119, 48, 152); border-bottom: 1px solid rgb(119, 48, 152);">SaaS blocks Settings</a></p></section>