flowbite-mcp 1.1.3 → 1.1.5

package/data/components/indicators.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Indicators - Flowbite
-description: Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS
-group: components
-toc: true
-
-previous: Gallery
-previousLink: components/gallery/
-next: Jumbotron
-nextLink: components/jumbotron/
----
-
 The indicator component can be used as a small element positioned absolutely relative to another component such as a button or card and show a number count, account status (red for offline, green for online) and other useful information.
 
 Check out the following examples for multiple sizes, colors, positionings, styles, and more all coded with Tailwind CSS and Flowbite.
@@ -19,7 +6,7 @@ Check out the following examples for multiple sizes, colors, positionings, style
 
 Use this example to create a simple indicator with multiple colors and position it anywhere on the website.
 
-{{< example class="flex items-center justify-center" github="components/indicators.md" show_dark=true >}}
+```html
 <span class="flex w-3 h-3 me-3 bg-neutral-quaternary rounded-full"></span>
 <span class="flex w-3 h-3 me-3 bg-dark rounded-full"></span>
 <span class="flex w-3 h-3 me-3 bg-brand rounded-full"></span>
@@ -29,37 +16,37 @@ Use this example to create a simple indicator with multiple colors and position
 <span class="flex w-3 h-3 me-3 bg-indigo rounded-full"></span>
 <span class="flex w-3 h-3 me-3 bg-warning rounded-full"></span>
 <span class="flex w-3 h-3 me-3 bg-teal rounded-full"></span>
-{{< /example >}}
+```
 
 ## Legend indicator
 
 This example can be used as a legend indicator for charts to also add a text next to the bullet point.
 
-{{< example class="flex items-center justify-center" github="components/indicators.md" show_dark=true >}}
+```html
 <span class="flex items-center text-sm font-medium text-heading me-3"><span class="flex w-2.5 h-2.5 bg-brand rounded-full me-1.5 shrink-0"></span>Visitors</span>
 <span class="flex items-center text-sm font-medium text-heading me-3"><span class="flex w-2.5 h-2.5 bg-purple rounded-full me-1.5 shrink-0"></span>Sessions</span>
 <span class="flex items-center text-sm font-medium text-heading me-3"><span class="flex w-2.5 h-2.5 bg-indigo rounded-full me-1.5 shrink-0"></span>Customers</span>
 <span class="flex items-center text-sm font-medium text-heading me-3"><span class="flex w-2.5 h-2.5 bg-teal rounded-full me-1.5 shrink-0"></span>Revenue</span>
-{{< /example >}}
+```
 
 ## Indicator count
 
 This example can be used to show a number count inside the indicator and position it relative to a button component.
 
-{{< example github="components/indicators.md" class="flex items-center justify-center" show_dark=true >}}
+```html
 <button type="button" class="relative inline-flex items-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">
     <svg class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 13h3.439a.991.991 0 0 1 .908.6 3.978 3.978 0 0 0 7.306 0 .99.99 0 0 1 .908-.6H20M4 13v6a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6M4 13l2-9h12l2 9M9 7h6m-7 3h8"/></svg>
     <span class="sr-only">Notifications</span>
     Messages
   <div class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-danger border-2 border-buffer rounded-full -top-2 -end-2">8</div>
 </button>
-{{< /example >}}
+```
 
 ## Status indicator
 
 Use this example to show a status indicator for the currently logged in user by showing red for offline and green for online.
 
-{{< example github="components/indicators.md" class="flex items-center justify-center" show_dark=true >}}
+```html
 
 <div class="relative me-4">
     <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="profile image">
@@ -69,13 +56,13 @@ Use this example to show a status indicator for the currently logged in user by
     <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="profile image">
     <span class="top-0 start-7 absolute w-3.5 h-3.5 bg-danger border-2 border-buffer rounded-full"></span>
 </div>
-{{< /example >}}
+```
 
 ## Badge indicator
 
 This example can be used to add an indicator inside of a badge component.
 
-{{< example github="components/indicators.md" class="flex items-center justify-center" show_dark=true >}}
+```html
 
 <ul role="list" class="max-w-md divide-y divide-default">
     <li class="py-3 sm:py-4">
@@ -117,13 +104,13 @@ This example can be used to add an indicator inside of a badge component.
         </div>
     </li>
 </ul>
-{{< /example >}}
+```
 
 ## Stepper indicator
 
 You can also use the indicators inside of a stepper component when completing a form element.
 
-{{< example class="space-y-8" github="components/indicators.md" show_dark=true >}}
+```html
 
 <ol class="flex items-center">
     <li class="relative w-full mb-6">
@@ -215,24 +202,24 @@ You can also use the indicators inside of a stepper component when completing a
         </div>
     </li>
 </ol>
-{{< /example >}}
+```
 
 ## Loading indicator
 
 Use this animated loading indicator when content inside of a card is still loading.
 
-{{< example class="space-y-8 flex items-center justify-center" github="components/indicators.md" show_dark=true >}}
+```html
 
 <div class="flex items-center justify-center bg-neutral-secondary-soft h-56 w-56 border border-default text-fg-brand-strong text-xs font-medium rounded-base">
     <div class="px-2 py-px ring-1 ring-inset ring-brand-subtle text-fg-brand-strong text-xs font-medium rounded-sm bg-brand-softer animate-pulse">loading...</div>
 </div>
-{{< /example >}}
+```
 
 ## Spinner indicator
 
 Use this animated spinner component inside of a card component that hasn't loaded yet.
 
-{{< example class="space-y-8 flex items-center justify-center" github="components/indicators.md" show_dark=true >}}
+```html
 
 <div class="flex items-center justify-center bg-neutral-secondary-soft h-56 w-56 border border-default text-fg-brand-strong text-xs font-medium rounded-base">
     <div role="status">
@@ -240,13 +227,13 @@ Use this animated spinner component inside of a card component that hasn't loade
         <span class="sr-only">Loading...</span>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Indicator position
 
 Use these examples to position the indicator component anywhere relative to the parent element.
 
-{{< example class="flex items-center justify-center space-y-8" github="components/indicators.md" show_dark=true >}}
+```html
 
 <div class="relative bg-neutral-secondary-soft h-56 w-56 border border-default text-fg-brand-strong text-xs font-medium rounded-base">
     <span class="bg-brand-softer text-xs font-medium text-fg-brand text-center p-0.5 ring-1 ring-inset ring-brand-subtle rounded-base px-2 absolute -translate-y-1/2 translate-x-1/2 right-1/2">top-center</span>
@@ -259,4 +246,4 @@ Use these examples to position the indicator component anywhere relative to the
     <span class="bg-brand-softer text-xs font-medium text-fg-brand text-center p-0.5 ring-1 ring-inset ring-brand-subtle rounded-base px-2 absolute translate-y-1/2 -translate-x-1/2 right-auto bottom-0 left-0">bottom-left</span>
     <span class="bg-brand-softer text-xs font-medium text-fg-brand text-center p-0.5 ring-1 ring-inset ring-brand-subtle rounded-base px-2 absolute translate-y-1/2 translate-x-1/2 left-auto bottom-0 right-0">bottom-right</span>
 </div>
-{{< /example >}}
+```

package/data/components/jumbotron.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Jumbotron - Flowbite
-description: Use the jumbotron component to show a marketing message to your users based on a headline and image inside of a card box based on Tailwind CSS
-group: components
-toc: true
-
-previous: Indicators
-previousLink: components/indicators/
-next: KBD (Keyboard)
-nextLink: components/kbd/
----
-
 The Jumbotron (hero) component can be used as the first section of your website with a focus on a marketing message to increase the likelihood of the user to continue browsing your website.
 
 This UI component features a heading title, a short description, an optional CTA button, background image, gradient or solid background color and it's generally inside of a card element.
@@ -21,7 +8,7 @@ The jumbotron component from Flowbite is responsive on all devices, natively sup
 
 Use this default example to show a title, description, and two CTA buttons for the jumbotron component.
 
-{{< example bodyClass="p-0" github="components/jumbotron.md" show_dark=true >}}
+```html
 
 <section class="bg-neutral-primary">
     <div class="py-8 px-4 mx-auto max-w-screen-2xl text-center lg:py-16">
@@ -36,13 +23,13 @@ Use this default example to show a title, description, and two CTA buttons for t
         </div>
     </div>
 </section>
-{{< /example >}}
+```
 
 ## Background image
 
 Use this jumbotron to apply a background image with a darkening opacity effect to improve readability.
 
-{{< example bodyClass="!p-0" github="components/jumbotron.md" show_dark=true >}}
+```html
 
 <section class="bg-center bg-no-repeat bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/conference.jpg')] bg-dark bg-blend-multiply">
     <div class="px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56">
@@ -57,13 +44,13 @@ Use this jumbotron to apply a background image with a darkening opacity effect t
         </div>
     </div>
 </section>
-{{< /example >}}
+```
 
 ## Featured video
 
 This component can be used to feature a video together with a heading title, description, and CTA buttons.
 
-{{< example bodyClass="!p-0" github="components/jumbotron.md" show_dark=true >}}
+```html
 
 <section class="bg-neutral-primary">
     <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 grid lg:grid-cols-2 gap-8 lg:gap-16">
@@ -83,13 +70,13 @@ This component can be used to feature a video together with a heading title, des
         </div>
     </div>
 </section>
-{{< /example >}}
+```
 
 ## Authentication form
 
 Use this component to show a sign in or register form as the first section of your website.
 
-{{< example bodyClass="!p-0 bg-gray-50 dark:bg-gray-900" github="components/jumbotron.md" show_dark=true >}}
+```html
 
 <section class="bg-neutral-primary">
     <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 grid lg:grid-cols-2 gap-8 lg:gap-16">
@@ -126,13 +113,13 @@ Use this component to show a sign in or register form as the first section of yo
         </div>
     </div>
 </section>
-{{< /example >}}
+```
 
 ## Gradient background
 
 Use this component to show a hero pattern with a linear gradient layout as an overlay for added effects.
 
-{{< example bodyClass="!p-0" github="components/jumbotron.md" show_dark=true >}}
+```html
 
 <section class="bg-neutral-primary bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern.svg')] dark:bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern-dark.svg')]">
     <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 z-10 relative">
@@ -158,13 +145,13 @@ Use this component to show a hero pattern with a linear gradient layout as an ov
     </div>
     <div class="bg-gradient-to-b from-blue-50 to-transparent dark:from-blue-900 w-full h-full absolute top-0 left-0 z-0"></div>
 </section>
-{{< /example >}}
+```
 
 ## Jumbotron with cards
 
 This example can be used to show cards with headings, descriptions, and CTA buttons inside a grid layout.
 
-{{< example bodyClass="!p-0" github="components/jumbotron.md" show_dark=true >}}
+```html
 
 <section class="bg-neutral-primary">
     <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16">
@@ -206,7 +193,7 @@ This example can be used to show cards with headings, descriptions, and CTA butt
         </div>
     </div>
 </section>
-{{< /example >}}
+```
 
 ## More examples
 

package/data/components/kbd.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS KBD (Keyboard) - Flowbite
-description: Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components
-group: components
-toc: true
-
-previous: Jumbotron
-previousLink: components/jumbotron/
-next: List group
-nextLink: components/list-group/
----
-
 The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.
 
 Use the semantic `<kbd>` keyboard input tag to use the default monospace font which is best suited for representing input keys.
@@ -19,7 +6,7 @@ Use the semantic `<kbd>` keyboard input tag to use the default monospace font wh
 
 Here's a list of KBD components that you can use inside any other element.
 
-{{< example github="components/kbd.md" show_dark=true >}}
+```html
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Shift</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Ctrl</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Tab</kbd>
@@ -27,24 +14,24 @@ Here's a list of KBD components that you can use inside any other element.
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Esc</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Spacebar</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Enter</kbd>
-{{< /example >}}
+```
 
 ## KBD inside text
 
 Use this example by nesting an inline KBD component inside a paragraph.
 
-{{< example github="components/kbd.md" show_dark=true >}}
+```html
 
 <p class="text-body">
     Please press <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Ctrl</kbd> + <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Shift</kbd> + <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">R</kbd> to re-render an MDN page.
 </p>
-{{< /example >}}
+```
 
 ## KBD inside table
 
 The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.
 
-{{< example github="components/kbd.md" show_dark=true >}}
+```html
 
 <div class="relative overflow-x-auto">
     <table class="w-full text-sm text-left rtl:text-right text-body">
@@ -114,13 +101,13 @@ The KBD component can also be used inside table components to denote what type o
         </tbody>
     </table>
 </div>
-{{< /example >}}
+```
 
 ## Arrow keys
 
 Use this example to show arrow keys inside the KBD styled element.
 
-{{< example github="components/list-group.md" show_dark=true >}}
+```html
 <kbd class="inline-flex items-center px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">
 <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 10">
 <path d="M9.207 1A2 2 0 0 0 6.38 1L.793 6.586A2 2 0 0 0 2.207 10H13.38a2 2 0 0 0 1.414-3.414L9.207 1Z"/>
@@ -145,13 +132,13 @@ Use this example to show arrow keys inside the KBD styled element.
 </svg>
 <span class="sr-only">Arrow key right</span>
 </kbd>
-{{< /example >}}
+```
 
 ## Letter keys
 
 Use this example if you need to show a key from the latin alphabet
 
-{{< example github="components/kbd.md" show_dark=true >}}
+```html
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">Q</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">W</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">E</kbd>
@@ -178,13 +165,13 @@ Use this example if you need to show a key from the latin alphabet
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">B</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">N</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">M</kbd>
-{{< /example >}}
+```
 
 ## Number keys
 
 Use this example to show a key inside a KBD component from the english numeral system.
 
-{{< example github="components/kbd.md" show_dark=true >}}
+```html
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">1</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">2</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">3</kbd>
@@ -195,13 +182,13 @@ Use this example to show a key inside a KBD component from the english numeral s
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">8</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">9</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">0</kbd>
-{{< /example >}}
+```
 
 ## Function keys
 
 This example can be used to denote function keys inside the KBD component.
 
-{{< example github="components/kbd.md" show_dark=true >}}
+```html
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">F1</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">F2</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">F3</kbd>
@@ -214,4 +201,4 @@ This example can be used to denote function keys inside the KBD component.
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">F10</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">F11</kbd>
 <kbd class="px-2 py-1.5 text-xs font-semibold text-heading bg-neutral-tertiary border border-default-medium rounded-base">F12</kbd>
-{{< /example >}}
+```

package/data/components/list-group.md

@@ -1,23 +1,10 @@
----
-layout: docs
-title: Tailwind CSS List Group - Flowbite
-description: Use the list group component to display a series of items, buttons or links inside a single element
-group: components
-toc: true
-
-previous: KBD (Keyboard)
-previousLink: components/kbd/
-next: Mega menu
-nextLink: components/mega-menu/
----
-
 The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.
 
 ## Default list group
 
 Here's an example of a list group that you can use right away.
 
-{{< example class="flex justify-center" github="components/list-group.md" show_dark=true >}}
+```html
 
 <ul class="w-48 text-sm font-medium text-heading bg-neutral-primary-soft border border-default rounded-base">
     <li class="w-full px-4 py-2 border-b border-default rounded-t-lg">Profile</li>
@@ -25,13 +12,13 @@ Here's an example of a list group that you can use right away.
     <li class="w-full px-4 py-2 border-b border-default">Messages</li>
     <li class="w-full px-4 py-2 rounded-b-lg">Download</li>
 </ul>
-{{< /example >}}
+```
 
 ## List group with links
 
 You can also display a series of links inside the list group element.
 
-{{< example class="flex justify-center" github="components/list-group.md" show_dark=true >}}
+```html
 
 <div class="w-48 text-sm font-medium text-heading bg-neutral-primary-soft border border-default rounded-base">
     <a href="#" aria-current="true" class="block w-full px-4 py-2 text-fg-brand bg-neutral-secondary-medium border-b border-default rounded-t-base cursor-pointer">
@@ -47,13 +34,13 @@ You can also display a series of links inside the list group element.
         Download
     </a>
 </div>
-{{< /example >}}
+```
 
 ## List group with buttons
 
 It is also possible to display a list of button element inside the list group component. The following example includes an active and disabled item as well.
 
-{{< example class="flex justify-center" github="components/list-group.md" show_dark=true >}}
+```html
 
 <div class="w-48 text-sm font-medium text-heading bg-neutral-primary-soft border border-default rounded-base">
     <button aria-current="true" type="button" class="w-full px-4 py-2 font-medium text-left rtl:text-right text-fg-brand bg-neutral-secondary-medium border-b border-default rounded-t-base cursor-pointer focus:outline-none">
@@ -72,13 +59,13 @@ It is also possible to display a list of button element inside the list group co
         Download
     </button>
 </div>
-{{< /example >}}
+```
 
 ## List group with icons
 
 Use the following example to create a list of buttons as a menu together with [SVG icons](https://flowbite.com/icons/).
 
-{{< example class="flex justify-center" github="components/list-group.md" show_dark=true >}}
+```html
 
 <div class="w-48 text-sm font-medium text-heading bg-neutral-primary-soft border border-default rounded-base">
     <a href="#" aria-current="true" class="flex items-center w-full px-4 py-2 text-fg-brand bg-neutral-secondary-medium border-b border-default rounded-t-base cursor-pointer">
@@ -98,14 +85,14 @@ Use the following example to create a list of buttons as a menu together with [S
         Download
     </a>
 </div>
-{{< /example >}}
+```
 
 
 ## Features list group
 
 Use this example to show a list of features with icons in a card component.
 
-{{< example class="flex justify-center" github="components/list-group.md" show_dark=true >}}
+```html
 
 <div class="w-72 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <ul role="list" class="space-y-4 p-6">
@@ -139,13 +126,13 @@ Use this example to show a list of features with icons in a card component.
         </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Statistic list with divider
 
 This example can be used to show a list of statistical data in a card component.
 
-{{< example class="flex justify-center" github="components/list-group.md" show_dark=true >}}
+```html
 
 <div class="w-96 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <ul role="list" class="space-y-3 p-6 divide-y divide-default">
@@ -221,13 +208,13 @@ This example can be used to show a list of statistical data in a card component.
         </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## List with avatars and CTA
 
 Use this component to show a list of users with avatars and CTA buttons.
 
-{{< example class="flex justify-center" github="components/list-group.md" show_dark=true >}}
+```html
 
 <div class="w-full max-w-sm p-6 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
     <h5 class="text-xl font-semibold text-heading mb-6">Latest users</h5>
@@ -362,4 +349,4 @@ Use this component to show a list of users with avatars and CTA buttons.
     </div>
 </div>
 
-{{< /example >}}
+```

package/data/components/mega-menu.md

@@ -1,17 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Mega Menu - Flowbite
-description: Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles.
-group: components
-toc: true
-requires_js: true
-
-previous: List group
-previousLink: components/list-group/
-next: Modal
-nextLink: components/modal/
----
-
 The mega menu component is a full-width dropdown that can be triggered by clicking on the menu item and it shows a list of links that you can use to navigate through the pages on a website.
 
 Make sure that you have included the Flowbite JavaScript file inside your project to enable the interactivity of the hamburger icon on mobile devices and the dropdown functionality.
@@ -20,7 +6,7 @@ Make sure that you have included the Flowbite JavaScript file inside your projec
 
 Use this example to show a list of links aligned on three columns inside the mega menu dropdown.
 
-{{< example bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="300" >}}
+```html
 
 <nav class="bg-neutral-primary border-default">
     <div class="flex flex-wrap items-center justify-between max-w-screen-xl mx-auto p-4">
@@ -126,13 +112,13 @@ Use this example to show a list of links aligned on three columns inside the meg
         </div>
     </div>
 </nav>
-{{< /example >}}
+```
 
 ## Mega menu with icons
 
 This example of a mega menu dropdown can be used to also show an icon near the text of the link.
 
-{{< example bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="300" >}}
+```html
 
 <nav class="bg-neutral-primary border-default">
     <div class="flex flex-wrap items-center justify-between max-w-screen-xl mx-auto p-4">
@@ -249,13 +235,13 @@ This example of a mega menu dropdown can be used to also show an icon near the t
         </div>
     </div>
 </nav>
-{{< /example >}}
+```
 
 ## Full width dropdown
 
 Use this example to show a mega menu dropdown that spans the entire width of the document page.
 
-{{< example bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="440" >}}
+```html
 
 <nav class="bg-neutral-primary-soft border-default">
     <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4">
@@ -355,13 +341,13 @@ Use this example to show a mega menu dropdown that spans the entire width of the
         </div>
     </div>
 </nav>
-{{< /example >}}
+```
 
 ## Full width with CTA
 
 This example can be used to also show a CTA button or link next to the menu items inside the dropdown.
 
-{{< example bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="360" >}}
+```html
 
 <nav class="bg-neutral-primary-soft border-default">
     <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4">
@@ -454,13 +440,13 @@ This example can be used to also show a CTA button or link next to the menu item
         </div>
     </div>
 </nav>
-{{< /example >}}
+```
 
 ## Full width with image
 
 This example can be used to also show a CTA with a backdround image inside the dropdown next to the other menu items and links.
 
-{{< example bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="360" >}}
+```html
 
 <nav class="bg-neutral-primary-soft border-default">
     <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4">
@@ -551,7 +537,7 @@ This example can be used to also show a CTA with a backdround image inside the d
         </div>
     </div>
 </nav>
-{{< /example >}}
+```
 
 ## More examples