[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3406":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":45,"readmeContent":46,"aiSummary":47,"trendingCount":16,"starSnapshotCount":16,"syncStatus":48,"lastSyncTime":49,"discoverSource":50},3406,"TW-Elements","mdbootstrap\u002FTW-Elements","mdbootstrap","𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎","https:\u002F\u002Ftw-elements.com",null,"JavaScript",13136,1580,216,104,0,1,3,18,44.6,"MIT License",false,"master",[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"css","dashboard-templates","design-systems","front-end","front-end-development","frontend","html","javascript","material-design","tailwind","tailwind-admin","tailwind-css","tailwind-react","tailwind-template","tailwind-vue","tailwindcss","tailwindcss-plugin","tailwindui","ui-components","uikit","2026-06-12 02:00:50","# TW Elements [\u003Cimg src=\"https:\u002F\u002Ftecdn.b-cdn.net\u002Fimg\u002Flogo\u002Fte-transparent-noshadows.webp\" width=\"45\" align=\"right\" alt=\"tw-elements\">](https:\u002F\u002Ftw-elements.com\u002F)\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftw-elements\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Ftw-elements.svg\" alt=\"Total Downloads\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmdbootstrap\u002FTW-Elements\u002Freleases\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Ftw-elements.svg\" alt=\"Latest Release\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fintent\u002Ftweet\u002F?text=Thanks+@TWElement+for+creating+an+amazing+collection+of+open+source+components+for+@tailwindcss%20https:\u002F\u002Ftw-elements.com\u002F&hashtags=tailwindCSS,bootstrap,webdesign,javascript,100DaysOfCode,DevCommunity\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Furl\u002Fhttp\u002Fshields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&\">\u003C\u002Fa>\n\nTW Elements is a huge collection of free, interactive components for Tailwind CSS.\n\n \u003Ctable>\n    \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>\n          \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002F\" alt=\"TW Elements tutorials\" rel=\"dofollow\">\n          \t\t\u003Cimg width=\"600\" src=\"https:\u002F\u002Ftecdn.b-cdn.net\u002Fimg\u002Fcomponents-big.jpg\">\n          \u003C\u002Fa>\n      \u003C\u002Ftd>\n      \u003Ctd>    \n        \u003Cul>\n         \u003Cli>500+ UI components\u003C\u002Fli>\n         \u003Cli>117+ design blocks\u003C\u002Fli>         \n         \u003Cli>Dark mode support\u003C\u002Fli>      \n         \u003Cli>Easy theming & customization\u003C\u002Fli>\n         \u003Cli>Simple, 1 minute install\u003C\u002Fli>    \n         \u003Cli>Free for personal & commercial use\u003C\u002Fli>\n        \u003C\u002Ful>\n        \u003Cp>\u003Cb>\u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fgetting-started\u002Fquick-start\u002F\">Get started with TW Elements now!\u003C\u002Fa>\u003C\u002Fb>\u003C\u002Fp>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n   \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\n---\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Community](#community)\n- [Components](#components)\n- [Design blocks](#design-blocks)\n- [Installation](#installation)\n\n---\n\n## Community\n\n- Motivate us with some [words of encouragament ❤️](https:\u002F\u002Fgithub.com\u002Fmdbootstrap\u002FTW-Elements\u002Fdiscussions\u002Fcategories\u002Fkind-words-general-feedback)\n- Share your [ideas & feature requests 💡](https:\u002F\u002Fgithub.com\u002Fmdbootstrap\u002FTW-Elements\u002Fdiscussions\u002Fcategories\u002Fshare-ideas-request-features)\n- Aks for help & help others in our [community support 🙏](https:\u002F\u002Fgithub.com\u002Fmdbootstrap\u002FTW-Elements\u002Fdiscussions\u002Fcategories\u002Fsupport-from-community)\n- **Engage, discuss & have fun in our [community 💬](https:\u002F\u002Fgithub.com\u002Fmdbootstrap\u002FTW-Elements\u002Fdiscussions)**\n\n**If you want to help the project grow, start by simply sharing it with your peers!**\n\n- [Share via Dev.to](\u003Chttps:\u002F\u002Fdev.to\u002Fnew?prefill=---%0Atitle%3A%20500+%20open-source%20components%20for%20TailwindCSS%20%0Apublished%3A%20true%0Atags%3Atailwindcss%0A---%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20[![Tailwind%20components](https:\u002F\u002Ftw-elements.com\u002Fimg\u002Fcomponents-big.jpg)](https:\u002F\u002Ftw-elements.com\u002F)%20%20%20%20%20%20%20%20\\n%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20I%27d%20like%20to%20share%20my%20latest%20discovery%20with%20you.%20\\n%20%20%20%20%20%20%20%20[Tailwind%20Elements](https:\u002F\u002Ftw-elements.com\u002F)%20is%20currently,%20the%20most%20popular%203rd%20party%20UI%20kit%20for%20TailwindCSS%20with%20over%2010k%20Github%20stars.%20%20%20%20%20%20%20%20[![GitHub%20Repo%20stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fmdbootstrap\u002Ftw-elements?style=social)](https:\u002F\u002Fgithub.com\u002Fmdbootstrap\u002FTW-Elements\u002F)%20%20%20%20%20%20%20%20It%27s%20a%20**huge%20collection%20of%20stunning%20components**%20made%20with%20attention%20to%20the%20smallest%20detail.%20%20%20%20%20%20%20%20%20Forms,%20cards,%20buttons,%20and%20hundreds%20of%20others.%20%20%20%20%20%20%20%20%20All%20components%20have%20**dark%20mode**%20and%20very%20intuitive%20**theming%20options**.%20%20%20%20%20%20%20%20The%20project%20is%20supported%20by%20an%20[engaged%20community%20on%20GitHub](https:\u002F\u002Fgithub.com\u002Fmdbootstrap\u002FTW-Elements\u002Fdiscussions),%20I%20recommend%20you%20check%20it%20out%20and%20join%20one%20of%20the%20many%20discussions.%20%20%20%20%20%20%20%20\\n%20%20%20%20%20%20%20%20You%20will%20find%20installation%20instructions%20[here](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fgetting-started\u002Finstallation),%20and%20you%20can%20track%20the%20progress%20of%20the%20project%20live%20%20%20%20%20%20%20%20%20[here](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fgetting-started\u002Fchangelog\u002F).%20%20%20%20%20%20%20%20\\n%20%20%20%20%20%20%20%20The%20project%20was%20kickstarted%20by%20@MDBootstrap,%20a%20group%20of%20open-source%20developers%20behind%20[MDB%20UI%20Kit](https:\u002F\u002Fgithub.com\u002Fmdbootstrap\u002Fmdb-ui-kit)%20-%20a%20high-quality%20UI%20kit%20for%20Bootstrap,%20and%20also%20behind%20[MDB%20GO](https:\u002F\u002Fmdbgo.com\u002F)%20-%20hosting%20and%20deployment%20platform.%20%20%20%20%20%20%20%20\\n%20%20%20%20%20%20%20%20I%20highly%20recommend%20you%20to%20check%20it%20out!%20%20%20%20%20%20%20%20\\n%20%20%20%20%20%20%20%20%7B%25%20link%20mdbootstrap\u002Ftw-elements-breakthrough-version-is-here-59hh%20%25%7D%20%20%20%20%20%20%20%20\\n>)\n- [Share via Twitter](https:\u002F\u002Ftwitter.com\u002Fintent\u002Ftweet?text=500%2B%20open-source%20components%20for%20%23TailwindCSS%20%F0%9F%A4%A9%0Ahttps%3A\u002F\u002Ftw-elements.com\u002F%0A%0ACongrats%20%40MDBootstrap%20%40ascensus_mdb%20%40dawidadach%20for%20this%20awesome%20design%20collection!%0A%0AI%20will%20keep%20using%20it%20in%20my%20projects%20for%20sure!%0A%0A%23uiux%20%23webdevelopment%20%23HTML%20%23CSS%20%23design%20%23Webdesign%20%23programming%20)\n- [Share via Facebook](https:\u002F\u002Fwww.facebook.com\u002Fsharer\u002Fsharer.php?u=https%3A\u002F\u002Ftw-elements.com)\n- [Share via LinkedIn](http:\u002F\u002Fwww.linkedin.com\u002FshareArticle?url=https%3A%2F%2Ftw-elements.com%2F&title=500%2B%20open-source%20components%20for%20TailwindCSS)\n- [Share via Pinterest](https:\u002F\u002Fwww.pinterest.com\u002Fpin\u002Fcreate\u002Fbutton?url=https:\u002F\u002Ftw-elements.com\u002F&media=https:\u002F\u002Ftw-elements.com\u002Fimg\u002Fcomponents-big.jpg&description=TailwindElements)\n- [Share via Reddit](https:\u002F\u002Freddit.com\u002Fsubmit?url=https:\u002F\u002Ftw-elements.com\u002F&title=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via StumbleUpon](https:\u002F\u002Fwww.stumbleupon.com\u002Fsubmit?url=https:\u002F\u002Ftw-elements.com\u002F&title=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via Vkontakte](https:\u002F\u002Fvk.com\u002Fshare.php?url=https:\u002F\u002Ftw-elements.com\u002F)\n- [Share via Weibo](https:\u002F\u002Fservice.weibo.com\u002Fshare\u002Fshare.php?url=https:\u002F\u002Ftw-elements.com\u002F&title=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via Hackernews](https:\u002F\u002Fnews.ycombinator.com\u002Fsubmitlink?u=https:\u002F\u002Ftw-elements.com\u002F&t=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via Gmail](https:\u002F\u002Fmail.google.com\u002Fmail\u002F?view=cm&to=%7Bemail_address%7D&su=Check%20out%20this%20project&body=Hello,%0AI%27m%20reaching%20out%20to%20recommend%20my%20latest%20discovery.%0A%0AIt%27s%20over%20500+%20open-source%20components%20for%20TailwindCSS%20with%20excellent%20support%20and%20an%20awesome%20community:%0Ahttps:\u002F\u002Ftw-elements.com\u002F%0A%0AI%20hope%20you%20will%20find%20it%20useful.%0ABest%20regards,&bcc=%7Bemail_address%7D&cc=%7Bemail_address%7D)\n- [Share via email](mailto:?subject=Check%20out%20this%20project&body=Hello%2C%0AI'm%20reaching%20out%20to%20recommend%20my%20latest%20discovery.%0A%0AIt's%20over%20500%20%20open-source%20components%20for%20Tailwind%20CSS%20with%20excellent%20support%20and%20an%20awesome%20community%3A%0Ahttps%3A%2F%2Ftw-elements.com%2F%0A%0AI%20hope%20you%20will%20find%20it%20useful.%0ABest%20regards%2C)\n\nThank you!\n\n---\n\n\n## Components\n\nA collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others – in TW Elements you will find all the essential elements necessary for every project.\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Fdatepicker\u002F\">\n            \u003Cimg alt=\"Datepicker\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fdatepicker.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fdropdown\u002F\">\n            \u003Cimg alt=\"Dropdown\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fdropdown.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fmodal\u002F\">\n            \u003Cimg alt=\"Modal\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fmodal.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Datepicker\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Dropdown\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Modal\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdata\u002Fcharts\u002F\">\n            \u003Cimg alt=\"Charts\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fcharts.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Ftooltip\u002F\">\n            \u003Cimg alt=\"Tooltips\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Ftooltips-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fcarousel\u002F\">\n            \u003Cimg alt=\"Carousel\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fcarousel.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Charts\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Tooltips\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Carousel\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Faccordion\u002F\">\n            \u003Cimg alt=\"Accordion\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Faccordion.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fnavigation\u002Ftabs\u002F\">\n            \u003Cimg alt=\"Tabs\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Ftabs.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fstepper\u002F\">\n            \u003Cimg alt=\"Stepper\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fstepper.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Accordion\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Tabs\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Stepper\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Ftimepicker\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Time picker\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Ftimepicker.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fnavigation\u002Ffooter\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Tables\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Ffooter.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fnavigation\u002Fnavbar\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Navbar\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fnavbar.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Timepicker\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Footer\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Navbar\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n    \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Falerts\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Time picker\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-pro\u002Falert-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Favatar\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Tables\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Favatar.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fbadges\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Navbar\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fbadge-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Alerts\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Avatar\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Badges\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fbutton-group\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Time picker\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fbutton-group-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fbuttons\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Tables\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fbutton-2.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fcards\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Navbar\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fcard-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Button group\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Buttons\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Cards\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fchips\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Time picker\" src=\"https:\u002F\u002Fmdbcdn.b-cdn.net\u002Fwp-content\u002Fthemes\u002Fmdbootstrap4\u002Fcontent\u002Fen\u002F_mdb5\u002Fstandard\u002Fpro\u002Fdemo-new\u002Fassets\u002Fimages\u002Fchips.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fcollapse\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Tables\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fcollapse-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fgallery\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Navbar\" src=\"https:\u002F\u002Fmdbcdn.b-cdn.net\u002Fwp-content\u002Fthemes\u002Fmdbootstrap4\u002Fcontent\u002Fen\u002F_mdb5\u002Fstandard\u002Fpro\u002Fdemo-new\u002Fassets\u002Fimages\u002Flightbox.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Chips\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Collapse\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Gallery\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fjumbotron\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Time picker\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fheader-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Flink\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Tables\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Flink.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Flistgroup\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Navbar\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Flist-group-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Jumbotron\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Link\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>List group\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fnotifications\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Time picker\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fnotification.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fparagraphs\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Tables\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fparagraphs.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fplaceholders\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Navbar\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fplaceholder-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Notifications\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Paragraphs\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Placeholders\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fpopover\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Time picker\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fpopover-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fprogress\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Tables\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fprogress-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Frating\u002F\">\n            \u003Cimg alt=\"Tailwind CSS Navbar\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-pro\u002Frating-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Popover\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Progress\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Rating\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fscroll-back-to-top-button\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fscroll-back-to-top.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fsocial-buttons\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fsocial-media.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fspinners\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fspinner-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Scroll to top\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Social buttons\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Spinners\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Ftimeline\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Ftimeline.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Ftoast\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-pro\u002Ftoast-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Ftooltip\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Ftooltip-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Timeline\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Toast\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Tooltip\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fvideo\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fvideo.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fvideo-carousel\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fvideo-carousel.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Fcheckbox\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fcheckbox-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Video\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Video carousel\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Checkbox\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Ffile-input\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Ffile-upload.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Finput-group\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Finput-group.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Flogin-form\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Flogin-form.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>File input\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Input group\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Login form\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>  \n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Fradio\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fradio-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Frange\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Frange-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Fregistration-form\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fregistration-form.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Radio\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Range\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Registration form\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Fsearch\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fsearch-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Fselect\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-pro\u002Fselect-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Fswitch\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fswitch.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Search\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Select\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Switch\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fforms\u002Ftextarea\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Ftextarea.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdata\u002Ftables\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Ftable-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fmethods\u002Fripple\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fripple.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Textarea\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Tables\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Ripple\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcontent-styles\u002Fanimations\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbcdn.b-cdn.net\u002Fwp-content\u002Fthemes\u002Fmdbootstrap4\u002Fcontent\u002Fen\u002F_mdb5\u002Fstandard\u002Fpro\u002Fdemo-new\u002Fassets\u002Fimages\u002Fanimations2.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcontent-styles\u002Fmask\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fmask-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcontent-styles\u002Fshadows\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fcomponents-free\u002Fshadow-1.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Animations\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Masks\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Shadows\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdata\u002Fdatatables\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbcdn.b-cdn.net\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fdatatable.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Flightbox\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbcdn.b-cdn.net\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Flightbox.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Frating\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbcdn.b-cdn.net\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Frating.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Datatables\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Lightbox\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Rating\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C!--New row-->\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fmethods\u002Fscrollbar\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbcdn.b-cdn.net\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fscrollbar.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fcomponents\u002Fpopconfirm\u002F\">\n            \u003Cimg alt=\"Tailwind Component\" src=\"https:\u002F\u002Fmdbcdn.b-cdn.net\u002Fdocs\u002Fstandard\u002Fpro\u002Fdemo\u002Fassets\u002Fimages\u002Fpopconfirm.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n     \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002F\">\n            \u003Cimg alt=\"Logo Clouds\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fdesign-blocks.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Scrollbar\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Popconfirm\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>More coming soon\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\n\u003C\u002Ftable>\n\n---\n\n## Design blocks\n\nResponsive Landing page blocks built with Tailwind CSS. Plenty of design blocks examples such as Teams, services, projects, faq, and many more.\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fhero-sections\u002F\">\n            \u003Cimg alt=\"Hero\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fhero.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fpricing\u002F\">\n            \u003Cimg alt=\"Pricing\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fpricing.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fcta\u002F\">\n            \u003Cimg alt=\"Call to action\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fcta.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Hero\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Pricing\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Call to action\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Ffeatures\u002F\">\n            \u003Cimg alt=\"Features\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Ffeatures.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fcontact\u002F\">\n            \u003Cimg alt=\"Contact\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fcontact.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fnews\u002F\">\n            \u003Cimg alt=\"News\u002Fblog\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fnews.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Features\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Contact\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>News\u002Fblog\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fteam\u002F\">\n            \u003Cimg alt=\"Team\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fteam.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fstats\u002F\">\n            \u003Cimg alt=\"Tabs\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fstats.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Ftestimonials\u002F\">\n            \u003Cimg alt=\"Stepper\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Ftestimonials.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Team\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Stats\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Testimonials\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fcontent\u002F\">\n            \u003Cimg alt=\"Content\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fcontent.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fnewsletter\u002F\">\n            \u003Cimg alt=\"Newsletter\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fnewsletter.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fproject-sections\u002F\">\n            \u003Cimg alt=\"Projects\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fprojects.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Content\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Newsletter\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Projects\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fheaders\u002F\">\n            \u003Cimg alt=\"Headers\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fheaders.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Ffaq\u002F\">\n            \u003Cimg alt=\"FAQ\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Ffaq.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Flogo-clouds\u002F\">\n            \u003Cimg alt=\"Logo Clouds\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Flogo-clouds.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Headers\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>FAQ\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Logo Clouds\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n    \u003Ctr>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fbanners\u002F\">\n            \u003Cimg alt=\"Headers\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fbanners.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fdesignblocks\u002Fmega-menu\u002F\">\n            \u003Cimg alt=\"FAQ\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fmega-menu.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Ftw-elements.com\u002F\">\n            \u003Cimg alt=\"Logo Clouds\" src=\"https:\u002F\u002Fmdbootstrap.com\u002Fimg\u002Ftw-demo\u002Fdesign-blocks.webp\">\n        \u003C\u002Fa>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>Banners\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Mega Menu\u003C\u002Fb>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>More coming soon\u003C\u002Fb>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n---\n\n## Integrations\n\nTW Elements integrations with popular technologies.\n\n- [Django Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fdjango-integration\u002F)\n- [Angular Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fangular-integration\u002F)\n- [Express Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fexpress-integration\u002F)\n- [Laravel Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Flaravel-integration\u002F)\n- [Next Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fnext-integration\u002F)\n- [Nuxt Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fnuxt-integration\u002F)\n- [Django Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Freact-integration\u002F)\n- [Remix Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fremix-integration\u002F)\n- [Solid Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fsolid-integration\u002F)\n- [Svelte Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fsvelte-integration\u002F)\n- [Sveltekit Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fsveltekit-integration\u002F)\n- [Vue Integration](https:\u002F\u002Ftw-elements.com\u002Fdocs\u002Fstandard\u002Fintegrations\u002Fvue-integration\u002F)\n\n---\n\n## Installation\n\n##### NPM\n\n1. Before starting the project make sure to install [Node.js (LTS)](https:\u002F\u002Fnodejs.org\u002Fen\u002F \"Node.js (LTS)\") and [TailwindCSS](https:\u002F\u002Ftailwindcss.com\u002F \"TailwindCSS\").\n\n2. Run the following command to install the package via NPM:\n\n```\nnpm install tw-elements\n```\n\n3. TW Elements is a plugin and should be included inside the **tailwind.config.js** file. It is also recommended to extend the content array with a js file that loads dynamic component classes:\n\n```javascript\nmodule.exports = {\n  content: [\".\u002Fsrc\u002F**\u002F*.{html,js}\", \".\u002Fnode_modules\u002Ftw-elements\u002Fjs\u002F**\u002F*.js\"],\n  plugins: [require(\"tw-elements\u002Fplugin.cjs\")],\n  darkMode: \"class\",\n};\n```\n\n4.  Dynamic components will work after adding the js file:\n\n```\n\u003Cscript src=\".\u002FTW-ELEMENTS-PATH\u002Fjs\u002Ftw-elements.umd.min.js\">\u003C\u002Fscript>\n```\n\nAlternatively, you can import it in the following way (bundler version):\n\n```\nimport 'tw-elements';\n```\n\n##### MDB GO \u002F CLI\n\nCreate, deploy and host anything with a single command.\n\n1. To start using MDB GO \u002F CLI install it with one command:\n\n```\nnpm install -g mdb-cli\n```\n\n2. Log into the CLI using your MDB account:\n\n```\nmdb login\n```\n\n3. Initialize a project and choose **Tailwind Elements** from the list:\n\n```\nmdb init tailwind-elements-free\n```\n\n4. Install the dependencies (inside the project directory):\n\n```\nnpm install\n```\n\n5. Run the app:\n\n```\nnpm start\n```\n\n6. Publish when you're ready:\n\n```\nmdb publish\n```\n\n##### CDN\n\nYou can easily test TW Elements by adding CDN scripts to your classic HTML template without the need for installing any packages.\n\nAdd the stylesheet files below in the _head_ section:\n\n```\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Roboto:300,400,500,700,900&display=swap\" rel=\"stylesheet\" \u002F>\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Ftw-elements\u002Fcss\u002Ftw-elements.min.css\" \u002F>\n\u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>\n\u003Cscript>\n  tailwind.config = {\n    darkMode: \"class\",\n    theme: {\n      fontFamily: {\n        sans: [\"Roboto\", \"sans-serif\"],\n        body: [\"Roboto\", \"sans-serif\"],\n        mono: [\"ui-monospace\", \"monospace\"],\n      },\n    },\n    corePlugins: {\n      preflight: false,\n    },\n  };\n\u003C\u002Fscript>\n```\n\nRequire the js bundled file right before the _body_ closing tag:\n\n```\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Ftw-elements\u002Fjs\u002Ftw-elements.umd.min.js\">\u003C\u002Fscript>\n```\n","TW-Elements 是一个庞大的免费 Tailwind CSS 组件集合，包含500多个UI组件和117个设计块。它支持暗模式，易于主题化和自定义，并且只需一分钟即可完成安装。该项目采用MIT许可证，适用于个人和商业用途。其核心功能包括丰富的交互式组件、设计模块以及简洁的集成方式，特别适合需要快速构建美观且响应式的Web界面的开发者。无论是创建仪表板模板还是设计系统，TW-Elements 都能提供强大的支持。",2,"2026-06-11 02:54:06","top_language"]