{"id":13400811,"url":"https://github.com/themesberg/flowbite","last_synced_at":"2025-05-12T13:05:58.278Z","repository":{"id":37082547,"uuid":"390399065","full_name":"themesberg/flowbite","owner":"themesberg","description":"Open-source UI component library and front-end development framework based on Tailwind CSS","archived":false,"fork":false,"pushed_at":"2025-03-27T13:17:06.000Z","size":19933,"stargazers_count":8550,"open_issues_count":226,"forks_count":791,"subscribers_count":47,"default_branch":"main","last_synced_at":"2025-05-12T13:05:36.353Z","etag":null,"topics":["components","css","design-system","eslint","figma","flowbite","html","hugo","javascript","prettier","tailwind","tailwindcss","typescript","ui-components","ui-framework","ui-library","webpack"],"latest_commit_sha":null,"homepage":"https://flowbite.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themesberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"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":"2021-07-28T15:21:50.000Z","updated_at":"2025-05-12T11:29:07.000Z","dependencies_parsed_at":"2024-01-22T15:02:18.136Z","dependency_job_id":"69a38aa2-1ff6-4066-acc4-6cc8ef3a93ec","html_url":"https://github.com/themesberg/flowbite","commit_stats":{"total_commits":2016,"total_committers":87,"mean_commits":23.17241379310345,"dds":"0.21478174603174605","last_synced_commit":"b6081ad64e7ecd1860261fa56784b8bc35496b8b"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themesberg","download_url":"https://codeload.github.com/themesberg/flowbite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745150,"owners_count":21957317,"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":["components","css","design-system","eslint","figma","flowbite","html","hugo","javascript","prettier","tailwind","tailwindcss","typescript","ui-components","ui-framework","ui-library","webpack"],"created_at":"2024-07-30T19:00:55.732Z","updated_at":"2025-05-12T13:05:58.243Z","avatar_url":"https://github.com/themesberg.png","language":"HTML","readme":"\u003cp\u003e\n    \u003ca href=\"https://flowbite.com\" \u003e\n      \u003cimg alt=\"Flowbite - Tailwind CSS components\" width=\"350\" src=\"https://flowbite.s3.amazonaws.com/github/logo-github.png\"\u003e\n    \u003c/a\u003e\u003cbr\u003e\n    Build websites even faster with components on top of Tailwind CSS\n\u003c/p\u003e\n\n\u003cp\u003e\n    \u003ca href=\"https://discord.com/invite/4eeurUVvTy\"\u003e\u003cimg src=\"https://img.shields.io/discord/902911619032576090?color=%237289da\u0026label=Discord\" alt=\"Discord\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/flowbite\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/flowbite.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/themesberg/flowbite/releases\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/flowbite.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://flowbite.com/docs/getting-started/license/\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n------\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Documentation](#documentation)\n- [Getting started](#getting-started)\n  - [Install using NPM](#install-using-npm)\n  - [Include via CDN](#include-via-cdn)\n  - [Bundled JavaScript](#bundled-javascript)\n  - [Data attributes](#data-attributes)\n    - [Init functions](#init-functions)\n  - [ESM and CJS](#esm-and-cjs)\n  - [TypeScript](#typescript)\n  - [RTL support](#rtl-support)\n  - [JavaScript Frameworks](#javascript-frameworks)\n  - [Back-end Frameworks](#back-end-frameworks)\n- [Components](#components)\n- [Figma Design System](#figma-design-system)\n- [Flowbite Blocks](#flowbite-blocks)\n- [Flowbite Icons](#flowbite-icons)\n- [Flowbite GPT](#flowbite-gpt)\n- [Pro version](#pro-version)\n- [Hire us](#hire-us)\n- [Learn Design Concepts](#learn-design-concepts)\n- [Community](#community)\n- [Copyright and license](#copyright-and-license)\n\n## Documentation\n\nFor full documentation, visit [flowbite.com](https://flowbite.com/).\n\n## Getting started\n\nFlowbite can be included as a plugin into an existing Tailwind CSS project and it is supposed to help you build websites faster by having a set of web components to work with built with the utility classes from Tailwind CSS.\n\n### Install using NPM\n\nMake sure that you have \u003ca href=\"https://nodejs.org/en/\" rel=\"nofollow\" target=\"_blank\"\u003eNode.js\u003c/a\u003e and \u003ca href=\"https://tailwindcss.com/docs/installation/using-postcss\" rel=\"nofollow\" target=\"_blank\"\u003eTailwind CSS\u003c/a\u003e installed. This guide works with Tailwind v4.\n\n1. Install Flowbite as a dependency using NPM by running the following command:\n\n```bash\nnpm install flowbite\n```\n\n2. Import Flowbite as a plugin inside your main Tailwind CSS file:\n\n```javascript\n@plugin \"flowbite/plugin\";\n```\n\n3. Make sure that you add the Flowbite JS source files to your CSS file:\n\n```bash\n@source \"../node_modules/flowbite\";\n```\n\n4. Include the JavaScript code that powers the interactive elements before the end of your `\u003cbody\u003e` tag:\n\n```html\n\u003cscript src=\"../path/to/flowbite/dist/flowbite.min.js\"\u003e\u003c/script\u003e\n```\n\nLearn more about the Flowbite JavaScript API and functionalities in the [JavaScript section](https://flowbite.com/docs/getting-started/javascript/).\n\nIf you have and old project with Tailwind CSS v3 then [check out this guide](https://flowbite.com/docs/getting-started/quickstart/#tailwind-css-v3-to-v4) to learn how to upgrade to v4.\n\n### Include using CDN\n\nThe quickest way to get started working with Flowbite is to include the CSS and JS into your project via CDN.\n\nRequire the following minified stylesheet inside the `head` tag:\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/flowbite@{{\u003c current_version \u003e}}/dist/flowbite.min.css\" rel=\"stylesheet\" /\u003e\n```\n\nAnd include the following JavaScript file before the end of the `body` element:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/flowbite@{{\u003c current_version \u003e}}/dist/flowbite.min.js\"\u003e\u003c/script\u003e\n```\n\nPlease remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes.\n\n### Bundled JavaScript\n\nOne of the most popular way of using Flowbite is to include the bundled Javascript file which is UMD ready using a bundler such as Webpack or Parcel which makes sure that all of the data attributes and functionality will work out-of-the-box.\n\nYou can directly import the main JavaScript file inside your bundled `app-bundle.js` file like this:\n\n```javascript\nimport 'flowbite';\n```\n\nThis file has access to all of the components and it automatically applies event listeners to the data attributes.\n\n### Data attributes\n\nThe preferred way to use the interactive UI components from Flowbite is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy.\n\nFor example, to set up a modal component all you need to do is use `data-modal-target` and `data-modal-{toggle|show|hide}` to toggle, show, or hide the component by clicking on any trigger element.\n\n```html\n\u003cbutton data-modal-target=\"defaultModal\" data-modal-toggle=\"defaultModal\" class=\"block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\" type=\"button\"\u003e\n  Toggle modal\n\u003c/button\u003e\n\n\u003c!-- Main modal --\u003e\n\u003cdiv id=\"defaultModal\" tabindex=\"-1\" aria-hidden=\"true\" class=\"fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full\"\u003e\n    \u003cdiv class=\"relative w-full max-w-2xl max-h-full\"\u003e\n        \u003c!-- Modal content --\u003e\n        \u003cdiv class=\"relative bg-white rounded-lg shadow-sm dark:bg-gray-700\"\u003e\n            \u003c!-- Modal header --\u003e\n            \u003cdiv class=\"flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 border-gray-200\"\u003e\n                \u003ch3 class=\"text-xl font-semibold text-gray-900 dark:text-white\"\u003e\n                    Terms of Service\n                \u003c/h3\u003e\n                \u003cbutton type=\"button\" class=\"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white\" data-modal-hide=\"defaultModal\"\u003e\n                    \u003csvg aria-hidden=\"true\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003cpath fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003cspan class=\"sr-only\"\u003eClose modal\u003c/span\u003e\n                \u003c/button\u003e\n            \u003c/div\u003e\n            \u003c!-- Modal body --\u003e\n            \u003cdiv class=\"p-6 space-y-6\"\u003e\n                \u003cp class=\"text-base leading-relaxed text-gray-500 dark:text-gray-400\"\u003e\n                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.\n                \u003c/p\u003e\n                \u003cp class=\"text-base leading-relaxed text-gray-500 dark:text-gray-400\"\u003e\n                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.\n                \u003c/p\u003e\n            \u003c/div\u003e\n            \u003c!-- Modal footer --\u003e\n            \u003cdiv class=\"flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600\"\u003e\n                \u003cbutton data-modal-hide=\"defaultModal\" type=\"button\" class=\"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\"\u003eI accept\u003c/button\u003e\n                \u003cbutton data-modal-hide=\"defaultModal\" type=\"button\" class=\"text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600\"\u003eDecline\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Init functions\n\nYou can also use the init functions to set up the event listeners yourself. Here's an example how you can do it with Vue or Nuxt:\n\n```\n\u003cscript setup\u003e\nimport { onMounted } from 'vue'\nimport { initFlowbite } from 'flowbite'\n\n// initialize components based on data attribute selectors\nonMounted(() =\u003e {\n    initFlowbite();\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    // Modal HTML markup with data attributes from Flowbite\n\u003c/template\u003e\n```\n\nThe `initFlowbite` function sets up all of the init functions for dropdowns, modals, navbars, tooltips and so on to hook onto the data attributes. Alternatively, you can also initialise each component category class separately with `initDropdowns` or `initModals`.\n\nYou can view more examples by browsing the [components from Flowbite](#components).\n\n### ESM and CJS\n\nFlowbite also offers an API for using the components programmatically and it supports both CJS and ESM for JavaScript which can be helpful if you need to expand the default capabilities of the data attributes interface and get access to function callbacks.\n\nHere's an example how you can import and create a new Modal component inside JavaScript:\n\n```javascript\nimport { Modal } from 'flowbite'\n\nconst $modalElement = document.querySelector('#modalEl');\n\nconst modalOptions = {\n    placement: 'bottom-right',\n    backdrop: 'dynamic',\n    backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',\n    onHide: () =\u003e {\n        console.log('modal is hidden');\n    },\n    onShow: () =\u003e {\n        console.log('modal is shown');\n    },\n    onToggle: () =\u003e {\n        console.log('modal has been toggled');\n    }\n}\n\nconst modal = new Modal($modalElement, modalOptions);\n\nmodal.show();\n```\n\nCheck out the JavaScript behaviour section of each component's page to learn how you can use this.\n\n### TypeScript\n\nFlowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite.\n\nAdditionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`:\n\n```javascript\nimport { Modal } from 'flowbite'\nimport type { ModalOptions, ModalInterface } from 'flowbite'\n\n// other code\n```\n\nGenerally speaking, all of the components have an interface definition that you can use whenever you create a new object to make sure that you're using the correct types of parameters and methods.\n\nWhen creating a new modal you can set the `ModalInterface` as the main type:\n\n```javascript\nconst modal: ModalInterface = new Modal($modalElement, modalOptions);\n```\n\nFlowbite also supports type definitions for the options object so if you want to set the placement of the modal based on types, here's how you would do that:\n\n```javascript\nconst modalOptions: ModalOptions = {\n    placement: 'top-right'\n}\n\nconst modal: ModalInterface = new Modal($modalElement, modalOptions);\n```\n\nLearn more about Flowbite and TypeScript in the [quickstart guide](https://flowbite.com/docs/getting-started/typescript/).\n\n### RTL support\n\nAll of the Flowbite UI components have native RTL support and you can easily set it up by using the `dir=\"rtl\"` attribute on the HTML element. Read more about Flowbite and [RTL support here](https://flowbite.com/docs/customize/rtl/).\n\n### JavaScript Frameworks\n\nThe awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, Angular and Qwik:\n\n- [🌀 Flowbite React Library](https://github.com/themesberg/flowbite-react)\n- [🍀 Flowbite Vue Library](https://github.com/themesberg/flowbite-vue)\n- [🎸 Flowbite Svelte Library](https://github.com/themesberg/flowbite-svelte)\n- [📕 Flowbite Angular Library](https://github.com/themesberg/flowbite-angular)\n- [👿 Flowbite Qwik Library](https://github.com/qwikerx/flowbite-qwik)\n\nWe also wrote integration guides for the following front-end frameworks and libraries:\n\n- [📝 Flowbite with React guide](https://flowbite.com/docs/getting-started/react/)\n- [📝 Flowbite with Next.js guide](https://flowbite.com/docs/getting-started/next-js/)\n- [📝 Flowbite with Remix guide](https://flowbite.com/docs/getting-started/remix/)\n- [📝 Flowbite with Vue guide](https://flowbite.com/docs/getting-started/vue/)\n- [📝 Flowbite with Nuxt guide](https://flowbite.com/docs/getting-started/nuxt-js/)\n- [📝 Flowbite with Svelte guide](https://flowbite.com/docs/getting-started/svelte/)\n- [📝 Flowbite with Astro guide](https://flowbite.com/docs/getting-started/astro/)\n- [📝 Flowbite with MeteorJS guide](https://flowbite.com/docs/getting-started/meteor-js/)\n- [📝 Flowbite with Gatsby guide](https://flowbite.com/docs/getting-started/gatsby/)\n- [📝 Flowbite with SolidJS guide](https://flowbite.com/docs/getting-started/solid-js/)\n- [📝 Flowbite with Qwik guide](https://flowbite.com/docs/getting-started/qwik/)\n\n### Back-end Frameworks\n\nFlowbite has a great integration with most of the back-end frameworks because it relies on vanilla JavaScript:\n\n- [📚 Using Flowbite with Laravel](https://flowbite.com/docs/getting-started/laravel/)\n- [🎼 Using Flowbite with Symfony](https://flowbite.com/docs/getting-started/symfony/)\n- [🚊 Using Flowbite with Ruby on Rails 7](https://flowbite.com/docs/getting-started/rails/)\n- [🐉 Using Flowbite with Phoenix (Elixir)](https://flowbite.com/docs/getting-started/phoenix/)\n- [🐸 Using Flowbite with Django](https://flowbite.com/docs/getting-started/django/)\n- [🌶 Using Flowbite with Flask](https://flowbite.com/docs/getting-started/flask/)\n\n## Components\n\nFlowbite is an open source collection of UI components built with the utility classes from Tailwind CSS that you can use as a starting point when coding user interfaces and websites.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eAlerts\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eBadge\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eBreadcrumbs\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/alerts/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Alerts\" src=\"https://flowbite.s3.amazonaws.com/github/alerts.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/badge/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Badge\" src=\"https://flowbite.s3.amazonaws.com/github/badge.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/breadcrumb/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Breadcrumbs\" src=\"https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eButtons\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eButton group\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eCards\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/buttons/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Buttons\" src=\"https://flowbite.s3.amazonaws.com/github/buttons.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/button-group/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Button Group\" src=\"https://flowbite.s3.amazonaws.com/github/button-group.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/card/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Cards\" src=\"https://flowbite.s3.amazonaws.com/github/cards.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eDropdown\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eForms\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eList group\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/dropdowns/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Dropdown\" src=\"https://flowbite.s3.amazonaws.com/github/dropdown.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/forms/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Forms\" src=\"https://flowbite.s3.amazonaws.com/github/forms.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/list-group/\"\u003e\n            \u003cimg alt=\"Tailwind CSS List group\" src=\"https://flowbite.s3.amazonaws.com/github/list-group.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eTypography\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eModal\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTabs\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/typography/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Typography\" src=\"https://flowbite.s3.amazonaws.com/github/typography.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/modal/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Modal\" src=\"https://flowbite.s3.amazonaws.com/github/modal.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/tabs/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tabs\" src=\"https://flowbite.s3.amazonaws.com/github/tabs.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eNavbar\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003ePagination\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTimeline\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/navbar/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Navbar\" src=\"https://flowbite.s3.amazonaws.com/github/navbar.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/pagination/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Pagination\" src=\"https://flowbite.s3.amazonaws.com/github/pagination.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/timeline/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Timeline\" src=\"https://flowbite.s3.amazonaws.com/github/timeline.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eProgress bar\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTables\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eToast\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/progress/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Progress Bar\" src=\"https://flowbite.s3.amazonaws.com/github/progress.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/tables/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tables\" src=\"https://flowbite.s3.amazonaws.com/github/tables.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/toast/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Toast\" src=\"https://flowbite.s3.amazonaws.com/github/toast.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eTooltips\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eDatepicker\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSpinner\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/tooltips/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Tooltips\" src=\"https://flowbite.s3.amazonaws.com/github/tooltips.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/datepicker/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Datepicker\" src=\"https://flowbite.s3.amazonaws.com/github/datepicker.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/spinner/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Spinner\" src=\"https://flowbite.s3.amazonaws.com/github/spinner.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eFooter\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eAccordion\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSidebar\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/footer/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Footer\" src=\"https://flowbite.s3.amazonaws.com/github/footer.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/accordion/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Accordion\" src=\"https://flowbite.s3.amazonaws.com/github/accordion.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/sidebar/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Sidebar\" src=\"https://flowbite.s3.amazonaws.com/github/sidebar.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eCarousel\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eAvatar\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eRating\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/carousel/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Carousel\" src=\"https://flowbite.s3.amazonaws.com/github/carousel.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/avatar/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Avatar\" src=\"https://flowbite.s3.amazonaws.com/github/avatar.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/rating/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Rating\" src=\"https://flowbite.s3.amazonaws.com/github/rating.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eInput Field\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eFile Input\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSearch Input\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/input-field/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Input Field\" src=\"https://flowbite.s3.amazonaws.com/github/input-field.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/file-input/\"\u003e\n            \u003cimg alt=\"Tailwind CSS File Input\" src=\"https://flowbite.s3.amazonaws.com/github/file-input.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/search-input/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Search Input\" src=\"https://flowbite.s3.amazonaws.com/github/search-input.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eSelect\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTextarea\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eCheckbox\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/select/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Select\" src=\"https://flowbite.s3.amazonaws.com/github/select.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/textarea/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Textarea\" src=\"https://flowbite.s3.amazonaws.com/github/textarea.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/checkbox/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Checkbox\" src=\"https://flowbite.s3.amazonaws.com/github/checkbox.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eRadio\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eToggle\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eRange Slider\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/radio/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Radio\" src=\"https://flowbite.s3.amazonaws.com/github/radio.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/toggle/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Toggle\" src=\"https://flowbite.s3.amazonaws.com/github/toggle.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/range/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Range Slider\" src=\"https://flowbite.s3.amazonaws.com/github/range-slider.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eFloating Label\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eMega Menu\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSkeleton\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/floating-label/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Floating Label\" src=\"https://flowbite.s3.amazonaws.com/github/floating-label.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/mega-menu/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Mega Menu\" src=\"https://flowbite.s3.amazonaws.com/github/mega-menu.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/skeleton/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Skeleton\" src=\"https://flowbite.s3.amazonaws.com/github/skeleton.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eKBD (keyboard)\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eDrawer (offcanvas)\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003ePopover\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/kbd/\"\u003e\n            \u003cimg alt=\"Tailwind CSS KBD (Keyboard)\" src=\"https://flowbite.s3.amazonaws.com/github/kbd.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/drawer/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Drawer (offcanvas)\" src=\"https://flowbite.s3.amazonaws.com/github/drawer.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/popover/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Popover\" src=\"https://flowbite.s3.amazonaws.com/github/popover.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eVideo\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eHeading\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eParagraph\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/video/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Video\" src=\"https://flowbite.s3.amazonaws.com/github/video.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/typography/headings/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Heading\" src=\"https://flowbite.s3.amazonaws.com/github/heading.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/typography/paragraphs/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Paragraph\" src=\"https://flowbite.s3.amazonaws.com/github/paragraph.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eBlockquote\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eImage\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eList\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/typography/blockquote/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Blockquote\" src=\"https://flowbite.s3.amazonaws.com/github/blockquote.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/typography/images/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Image\" src=\"https://flowbite.s3.amazonaws.com/github/image.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/typography/lists/\"\u003e\n            \u003cimg alt=\"Tailwind CSS List\" src=\"https://flowbite.s3.amazonaws.com/github/list.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eLink\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eText\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eHorizontal line (HR)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/typography/links/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Link\" src=\"https://flowbite.s3.amazonaws.com/github/link.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/typography/text/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Text\" src=\"https://flowbite.s3.amazonaws.com/github/text.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/typography/hr/\"\u003e\n            \u003cimg alt=\"Tailwind CSS HR\" src=\"https://flowbite.s3.amazonaws.com/github/hr.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eSpeed Dial\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eStepper\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eIndicators\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/speed-dial/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Speed Dial\" src=\"https://flowbite.s3.amazonaws.com/github/dial.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/stepper/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Stepper\" src=\"https://flowbite.s3.amazonaws.com/github/stepper.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/indicators/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Indicators\" src=\"https://flowbite.s3.amazonaws.com/github/indicators.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eBottom Navigation\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eSticky Banner\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eGallery (Masonry)\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/bottom-navigation/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Bottom Navigation Bar\" src=\"https://flowbite.s3.amazonaws.com/github/bottom-bar.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/banner/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Bottom Sticky Banner\" src=\"https://flowbite.s3.amazonaws.com/github/banner.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/gallery/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Image Gallery (Masonry)\" src=\"https://flowbite.s3.amazonaws.com/github/gallery.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eJumbotron\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eDevice mockups\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eCharts\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/jumbotron/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Jumbotron\" src=\"https://flowbite.s3.amazonaws.com/github/jumbotron.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/device-mockups/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Device Mockups\" src=\"https://flowbite.s3.amazonaws.com/github/device-mockups.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/plugins/charts/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Charts\" src=\"https://flowbite.s3.amazonaws.com/github/charts.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eNumber Input\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003ePhone Input\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eChat Bubble\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/number-input/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Number Input\" src=\"https://flowbite.s3.amazonaws.com/github/number-input.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/phone-input/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Phone Input\" src=\"https://flowbite.s3.amazonaws.com/github/phone-input.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/chat-bubble/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Chat Bubble\" src=\"https://flowbite.s3.amazonaws.com/github/chat-bubble.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eCopy to Clipboard\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eTimepicker\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003eDataTables\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/components/clipboard/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Clipboard\" src=\"https://flowbite.s3.amazonaws.com/github/clipboard.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/forms/timepicker/\"\u003e\n            \u003cimg alt=\"Tailwind CSS Timepicker\" src=\"https://flowbite.s3.amazonaws.com/github/timepicker.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/plugins/datatables/\"\u003e\n            \u003cimg alt=\"Tailwind CSS DataTables\" src=\"https://flowbite.s3.amazonaws.com/github/datatables.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003eWYSIWYG Editor\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"33.3333%\"\u003e\n        \u003ca href=\"https://flowbite.com/docs/plugins/wysiwyg/\"\u003e\n            \u003cimg alt=\"Tailwind CSS WYSIWYG Text Editor\" src=\"https://flowbite.s3.amazonaws.com/github/wysiwyg.jpg\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\u003c/td\u003e\n    \u003ctd width=\"33.3333%\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Figma Design System\n\nIf you need the Figma files for the components you can check out our website for more information:\n\n🎨 [Get access to the Figma design files](https://flowbite.com/figma/)\n\n## Flowbite Blocks\n\nCheck out Flowbite Blocks to get access to over 400+ website sections coded in Tailwind CSS and Flowbite:\n\n📦 [Check out Flowbite Blocks](https://flowbite.com/blocks/)\n\n## Flowbite Icons\n\nStart using over 450+ free and open-source collection of solid and outline SVG icons built for Tailwind CSS and with support for Figma and JSX (React):\n\n🔍 [Check out the icons](https://flowbite.com/icons/)\n\n## Flowbite GPT\n\nWe've developed a custom trained ChatGPT model that you can use to generate website sections and pages based on the resources from Flowbite and Tailwind CSS.\n\n🤖 [Generate with Flowbite GPT](https://chat.openai.com/g/g-y7yC35HB9-flowbite-gpt)\n\n## Pro version\n\nGet access to all premium features including the Figma design system, access to all Flowbite Block sections and a dashboard UI interface:\n\n💎 [Check out Flowbite Pro](https://flowbite.com/pro/)\n\n## Hire us\n\nIf you're ready to take your application to the next level you can work with us on your project with developers who have been using Flowbite and Tailwind CSS.\n\n🙋‍♂️ [Work with us](https://flowbite.com/work-with-us/)\n\n## Learn Design Concepts\n\nIf you want to create even better Flowbite pages, learn design fundamentals from Teach Me Design - Enhance UI, a book that covers color theory, typography, UI and UX so you can make the most to implement the Flowbite Ecosystem!\n\n📖 [Learn with Enhance UI](https://www.enhanceui.com/?ref=flowbite-github)\n\n## Community\n\nIf you need help or just want to discuss about the library join the community on Github:\n\n⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)\n\nFor casual chatting with others using the library:\n\n💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)\n\nVideo tutorials and presentations using Flowbite:\n\n🎥 [Subscribe to our YouTube channel](https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A)\n\n## Copyright and license\n\nThe Flowbite name and logos are trademarks of Bergside Inc.\n\n- 📝 [Read about the licensing terms](https://flowbite.com/docs/getting-started/license/)\n- 📀 [Brand guideline and trademark usage agreement](https://flowbite.com/brand/)\n","funding_links":[],"categories":["HTML","By Language","webpack","Built with TypeScript","UI 设计相关"],"sub_categories":["Web"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Fflowbite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemesberg%2Fflowbite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Fflowbite/lists"}