{"id":13403217,"url":"https://github.com/mdbootstrap/TW-Elements","last_synced_at":"2025-03-14T08:31:28.404Z","repository":{"id":5374363,"uuid":"6561551","full_name":"mdbootstrap/TW-Elements","owner":"mdbootstrap","description":"𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎","archived":false,"fork":false,"pushed_at":"2024-03-04T13:11:13.000Z","size":81072,"stargazers_count":12632,"open_issues_count":99,"forks_count":1615,"subscribers_count":219,"default_branch":"master","last_synced_at":"2024-04-14T05:08:22.304Z","etag":null,"topics":["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"],"latest_commit_sha":null,"homepage":"https://tw-elements.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"intridea/oilreporter-mobile","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2012-11-06T12:17:46.000Z","updated_at":"2024-05-08T12:44:35.556Z","dependencies_parsed_at":"2023-10-11T23:54:40.933Z","dependency_job_id":"259e7934-0291-427d-8336-f18309b096f9","html_url":"https://github.com/mdbootstrap/TW-Elements","commit_stats":{"total_commits":1569,"total_committers":150,"mean_commits":10.46,"dds":0.7412364563416189,"last_synced_commit":"dda3cf016223ce5d29434f1881b753a973110460"},"previous_names":["utatti/perfect-scrollbar","mdbootstrap/tw-elements","mdbootstrap/tailwind-elements"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2FTW-Elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2FTW-Elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2FTW-Elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2FTW-Elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/TW-Elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243547368,"owners_count":20308694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-07-30T19:01:26.940Z","updated_at":"2025-03-14T08:31:28.379Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"# TW Elements [\u003cimg src=\"https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp\" width=\"45\" align=\"right\" alt=\"tw-elements\"\u003e](https://tw-elements.com/)\u003ca href=\"https://www.npmjs.com/package/tw-elements\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/tw-elements.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e \u003ca href=\"https://github.com/mdbootstrap/TW-Elements/releases\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/tw-elements.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e \u003ca href=\"https://twitter.com/intent/tweet/?text=Thanks+@TWElement+for+creating+an+amazing+collection+of+open+source+components+for+@tailwindcss%20https://tw-elements.com/\u0026hashtags=tailwindCSS,bootstrap,webdesign,javascript,100DaysOfCode,DevCommunity\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\u0026label=Let%20us%20know%20you%20were%20here%21\u0026\"\u003e\u003c/a\u003e\n\nTW Elements is a huge collection of free, interactive components for Tailwind CSS.\n\n \u003ctable\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n          \u003ca href=\"https://tw-elements.com/\" alt=\"TW Elements tutorials\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg width=\"600\" src=\"https://tecdn.b-cdn.net/img/components-big.jpg\"\u003e\n          \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e    \n        \u003cul\u003e\n         \u003cli\u003e500+ UI components\u003c/li\u003e\n         \u003cli\u003e117+ design blocks\u003c/li\u003e         \n         \u003cli\u003eDark mode support\u003c/li\u003e      \n         \u003cli\u003eEasy theming \u0026 customization\u003c/li\u003e\n         \u003cli\u003eSimple, 1 minute install\u003c/li\u003e    \n         \u003cli\u003eFree for personal \u0026 commercial use\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cp\u003e\u003cb\u003e\u003ca href=\"https://tw-elements.com/docs/standard/getting-started/quick-start/\"\u003eGet started with TW Elements now!\u003c/a\u003e\u003c/b\u003e\u003c/p\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n   \u003c/tbody\u003e\n  \u003c/table\u003e\n\n---\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Community](#community)\n- [Coming soon](#coming-soon)\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://github.com/mdbootstrap/TW-Elements/discussions/categories/kind-words-general-feedback)\n- Share your [ideas \u0026 feature requests 💡](https://github.com/mdbootstrap/TW-Elements/discussions/categories/share-ideas-request-features)\n- Aks for help \u0026 help others in our [community support 🙏](https://github.com/mdbootstrap/TW-Elements/discussions/categories/support-from-community)\n- **Engage, discuss \u0026 have fun in our [community 💬](https://github.com/mdbootstrap/TW-Elements/discussions)**\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://dev.to/new?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://tw-elements.com/img/components-big.jpg)](https://tw-elements.com/)%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://tw-elements.com/)%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://img.shields.io/github/stars/mdbootstrap/tw-elements?style=social)](https://github.com/mdbootstrap/TW-Elements/)%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://github.com/mdbootstrap/TW-Elements/discussions),%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://tw-elements.com/docs/getting-started/installation),%20and%20you%20can%20track%20the%20progress%20of%20the%20project%20live%20%20%20%20%20%20%20%20%20[here](https://tw-elements.com/docs/standard/getting-started/changelog/).%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://github.com/mdbootstrap/mdb-ui-kit)%20-%20a%20high-quality%20UI%20kit%20for%20Bootstrap,%20and%20also%20behind%20[MDB%20GO](https://mdbgo.com/)%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/tw-elements-breakthrough-version-is-here-59hh%20%25%7D%20%20%20%20%20%20%20%20\\n\u003e)\n- [Share via Twitter](https://twitter.com/intent/tweet?text=500%2B%20open-source%20components%20for%20%23TailwindCSS%20%F0%9F%A4%A9%0Ahttps%3A//tw-elements.com/%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://www.facebook.com/sharer/sharer.php?u=https%3A//tw-elements.com)\n- [Share via LinkedIn](http://www.linkedin.com/shareArticle?url=https%3A%2F%2Ftw-elements.com%2F\u0026title=500%2B%20open-source%20components%20for%20TailwindCSS)\n- [Share via Pinterest](https://www.pinterest.com/pin/create/button?url=https://tw-elements.com/\u0026media=https://tw-elements.com/img/components-big.jpg\u0026description=TailwindElements)\n- [Share via Reddit](https://reddit.com/submit?url=https://tw-elements.com/\u0026title=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via StumbleUpon](https://www.stumbleupon.com/submit?url=https://tw-elements.com/\u0026title=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via Vkontakte](https://vk.com/share.php?url=https://tw-elements.com/)\n- [Share via Weibo](https://service.weibo.com/share/share.php?url=https://tw-elements.com/\u0026title=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via Hackernews](https://news.ycombinator.com/submitlink?u=https://tw-elements.com/\u0026t=500+%20open-source%20components%20for%20TailwindCSS)\n- [Share via Gmail](https://mail.google.com/mail/?view=cm\u0026to=%7Bemail_address%7D\u0026su=Check%20out%20this%20project\u0026body=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://tw-elements.com/%0A%0AI%20hope%20you%20will%20find%20it%20useful.%0ABest%20regards,\u0026bcc=%7Bemail_address%7D\u0026cc=%7Bemail_address%7D)\n- [Share via email](mailto:?subject=Check%20out%20this%20project\u0026body=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## Coming soon\n\nCheck out the upcoming features - make sure to **join the waiting list** in order to **get early access**!\n\n \u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/builder/\"\u003e\n            \u003cimg alt=\"Design blocks\" src=\"https://mdbootstrap.com/img/tw-demo/drag-and-drop.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/templates/\"\u003e\n            \u003cimg alt=\"Templates\" src=\"https://mdbootstrap.com/img/tw-demo/templates.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e    \n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eDrag \u0026 drop builder\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTemplates\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\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\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/datepicker/\"\u003e\n            \u003cimg alt=\"Datepicker\" src=\"https://mdbootstrap.com/img/tw-demo/datepicker.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/dropdown/\"\u003e\n            \u003cimg alt=\"Dropdown\" src=\"https://mdbootstrap.com/img/tw-demo/dropdown.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/modal/\"\u003e\n            \u003cimg alt=\"Modal\" src=\"https://mdbootstrap.com/img/tw-demo/modal.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eDatepicker\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eDropdown\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eModal\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/data/charts/\"\u003e\n            \u003cimg alt=\"Charts\" src=\"https://mdbootstrap.com/img/tw-demo/charts.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/tooltip/\"\u003e\n            \u003cimg alt=\"Tooltips\" src=\"https://mdbootstrap.com/img/tw-demo/tooltips-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/carousel/\"\u003e\n            \u003cimg alt=\"Carousel\" src=\"https://mdbootstrap.com/img/tw-demo/carousel.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCharts\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTooltips\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCarousel\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/accordion/\"\u003e\n            \u003cimg alt=\"Accordion\" src=\"https://mdbootstrap.com/img/tw-demo/accordion.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/navigation/tabs/\"\u003e\n            \u003cimg alt=\"Tabs\" src=\"https://mdbootstrap.com/img/tw-demo/tabs.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/stepper/\"\u003e\n            \u003cimg alt=\"Stepper\" src=\"https://mdbootstrap.com/img/tw-demo/stepper.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eAccordion\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTabs\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eStepper\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/timepicker/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/img/tw-demo/timepicker.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/navigation/footer/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/img/tw-demo/footer.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/navigation/navbar/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/img/tw-demo/navbar.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTimepicker\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eFooter\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eNavbar\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n    \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/alerts/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/alert-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/avatar/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/avatar.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/badges/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/badge-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eAlerts\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eAvatar\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eBadges\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/button-group/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-group-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/buttons/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-2.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/cards/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/card-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eButton group\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eButtons\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCards\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/chips/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/chips.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/collapse/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/collapse-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/gallery/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/lightbox.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eChips\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCollapse\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eGallery\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/jumbotron/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/header-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/link/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/link.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/listgroup/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/list-group-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eJumbotron\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eLink\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eList group\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/notifications/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/notification.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/paragraphs/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/paragraphs.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/placeholders/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/placeholder-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eNotifications\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eParagraphs\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003ePlaceholders\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/popover/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Time picker\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/popover-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/progress/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/progress-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/rating/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/rating-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003ePopover\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eProgress\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRating\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/scroll-back-to-top-button/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/scroll-back-to-top.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/social-buttons/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/social-media.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/spinners/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/spinner-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eScroll to top\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSocial buttons\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSpinners\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/timeline/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/timeline.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/toast/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/toast-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/tooltip/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/tooltip-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTimeline\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eToast\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTooltip\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/video/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/video-carousel/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video-carousel.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/checkbox/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/checkbox-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eVideo\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eVideo carousel\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCheckbox\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/file-input/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/file-upload.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/input-group/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/input-group.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/login-form/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/login-form.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eFile input\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eInput group\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eLogin form\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e  \n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/radio/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/radio-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/range/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/range-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/registration-form/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/registration-form.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRadio\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRange\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRegistration form\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/search/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/search-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/select/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/select-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/switch/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/switch.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSearch\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSelect\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSwitch\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/forms/textarea/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/textarea.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/data/tables/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/table-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/methods/ripple/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/ripple.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTextarea\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTables\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRipple\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/content-styles/animations/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/animations2.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/content-styles/mask/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/mask-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/content-styles/shadows/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/shadow-1.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eAnimations\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eMasks\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eShadows\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/data/datatables/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/datatable.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/lightbox/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/lightbox.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/rating/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/rating.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eDatatables\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eLightbox\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eRating\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c!--New row--\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/methods/scrollbar/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/scrollbar.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/components/popconfirm/\"\u003e\n            \u003cimg alt=\"Tailwind Component\" src=\"https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/popconfirm.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n     \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/\"\u003e\n            \u003cimg alt=\"Logo Clouds\" src=\"https://mdbootstrap.com/img/tw-demo/design-blocks.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eScrollbar\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003ePopconfirm\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eMore coming soon\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\n\u003c/table\u003e\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\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/hero-sections/\"\u003e\n            \u003cimg alt=\"Hero\" src=\"https://mdbootstrap.com/img/tw-demo/hero.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/pricing/\"\u003e\n            \u003cimg alt=\"Pricing\" src=\"https://mdbootstrap.com/img/tw-demo/pricing.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/cta/\"\u003e\n            \u003cimg alt=\"Call to action\" src=\"https://mdbootstrap.com/img/tw-demo/cta.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eHero\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003ePricing\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCall to action\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/features/\"\u003e\n            \u003cimg alt=\"Features\" src=\"https://mdbootstrap.com/img/tw-demo/features.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/contact/\"\u003e\n            \u003cimg alt=\"Contact\" src=\"https://mdbootstrap.com/img/tw-demo/contact.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/news/\"\u003e\n            \u003cimg alt=\"News/blog\" src=\"https://mdbootstrap.com/img/tw-demo/news.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eFeatures\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eContact\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eNews/blog\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/team/\"\u003e\n            \u003cimg alt=\"Team\" src=\"https://mdbootstrap.com/img/tw-demo/team.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/stats/\"\u003e\n            \u003cimg alt=\"Tabs\" src=\"https://mdbootstrap.com/img/tw-demo/stats.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/testimonials/\"\u003e\n            \u003cimg alt=\"Stepper\" src=\"https://mdbootstrap.com/img/tw-demo/testimonials.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTeam\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eStats\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eTestimonials\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/content/\"\u003e\n            \u003cimg alt=\"Content\" src=\"https://mdbootstrap.com/img/tw-demo/content.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/newsletter/\"\u003e\n            \u003cimg alt=\"Newsletter\" src=\"https://mdbootstrap.com/img/tw-demo/newsletter.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/project-sections/\"\u003e\n            \u003cimg alt=\"Projects\" src=\"https://mdbootstrap.com/img/tw-demo/projects.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eContent\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eNewsletter\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eProjects\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/headers/\"\u003e\n            \u003cimg alt=\"Headers\" src=\"https://mdbootstrap.com/img/tw-demo/headers.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/faq/\"\u003e\n            \u003cimg alt=\"FAQ\" src=\"https://mdbootstrap.com/img/tw-demo/faq.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/logo-clouds/\"\u003e\n            \u003cimg alt=\"Logo Clouds\" src=\"https://mdbootstrap.com/img/tw-demo/logo-clouds.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eHeaders\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eFAQ\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eLogo Clouds\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/banners/\"\u003e\n            \u003cimg alt=\"Headers\" src=\"https://mdbootstrap.com/img/tw-demo/banners.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/docs/standard/designblocks/mega-menu/\"\u003e\n            \u003cimg alt=\"FAQ\" src=\"https://mdbootstrap.com/img/tw-demo/mega-menu.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://tw-elements.com/\"\u003e\n            \u003cimg alt=\"Logo Clouds\" src=\"https://mdbootstrap.com/img/tw-demo/design-blocks.webp\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eBanners\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eMega Menu\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eMore coming soon\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n---\n\n## Integrations\n\nTW Elements integrations with popular technologies.\n\n- [Django Integration](https://tw-elements.com/docs/standard/integrations/django-integration/)\n- [Angular Integration](https://tw-elements.com/docs/standard/integrations/angular-integration/)\n- [Express Integration](https://tw-elements.com/docs/standard/integrations/express-integration/)\n- [Laravel Integration](https://tw-elements.com/docs/standard/integrations/laravel-integration/)\n- [Next Integration](https://tw-elements.com/docs/standard/integrations/next-integration/)\n- [Nuxt Integration](https://tw-elements.com/docs/standard/integrations/nuxt-integration/)\n- [Django Integration](https://tw-elements.com/docs/standard/integrations/react-integration/)\n- [Remix Integration](https://tw-elements.com/docs/standard/integrations/remix-integration/)\n- [Solid Integration](https://tw-elements.com/docs/standard/integrations/solid-integration/)\n- [Svelte Integration](https://tw-elements.com/docs/standard/integrations/svelte-integration/)\n- [Sveltekit Integration](https://tw-elements.com/docs/standard/integrations/sveltekit-integration/)\n- [Vue Integration](https://tw-elements.com/docs/standard/integrations/vue-integration/)\n\n---\n\n## Installation\n\n##### NPM\n\n1. Before starting the project make sure to install [Node.js (LTS)](https://nodejs.org/en/ \"Node.js (LTS)\") and [TailwindCSS](https://tailwindcss.com/ \"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: [\"./src/**/*.{html,js}\", \"./node_modules/tw-elements/js/**/*.js\"],\n  plugins: [require(\"tw-elements/plugin.cjs\")],\n  darkMode: \"class\",\n};\n```\n\n4.  Dynamic components will work after adding the js file:\n\n```\n\u003cscript src=\"./TW-ELEMENTS-PATH/js/tw-elements.umd.min.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, you can import it in the following way (bundler version):\n\n```\nimport 'tw-elements';\n```\n\n##### MDB GO / CLI\n\nCreate, deploy and host anything with a single command.\n\n1. To start using MDB GO / 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://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900\u0026display=swap\" rel=\"stylesheet\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/tw-elements/css/tw-elements.min.css\" /\u003e\n\u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n\u003cscript\u003e\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/script\u003e\n```\n\nRequire the js bundled file right before the _body_ closing tag:\n\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/tw-elements/js/tw-elements.umd.min.js\"\u003e\u003c/script\u003e\n```\n","funding_links":[],"categories":["JavaScript","前端开发框架及项目","css","tailwindcss"],"sub_categories":["其他_文本生成、文本对话"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2FTW-Elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2FTW-Elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2FTW-Elements/lists"}