flowbite-mcp 1.1.3 → 1.1.5

package/data/components/badge.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Badges - Flowbite
-description: Use Tailwind CSS badges as elements to show counts or labels separately or inside other components
-group: components
-toc: true
-
-previous: Avatar
-previousLink: components/avatar/
-next: Banner
-nextLink: components/banner/
----
-
 The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
 
 Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a `span` element.
@@ -19,98 +6,98 @@ Alternatively, badges can also be used as standalone elements that link to a cer
 
 Use the following badge elements to indicate counts or labels inside or outside components.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="bg-brand-softer text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">Brand</span>
 <span class="bg-neutral-primary-soft text-heading text-xs font-medium px-1.5 py-0.5 rounded">Alternative</span>
 <span class="bg-neutral-secondary-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded">Gray</span>
 <span class="bg-danger-soft text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded">Danger</span>
 <span class="bg-success-soft text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded">Success</span>
 <span class="bg-warning-soft text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded">Warning</span>
-{{< /example >}}
+```
 
 ## Bordered badges
 
 This example can be used to add a border accent to the badge component.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">Brand</span>
 <span class="bg-neutral-primary-soft border border-default text-heading text-xs font-medium px-1.5 py-0.5 rounded">Alternative</span>
 <span class="bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded">Gray</span>
 <span class="bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded">Danger</span>
 <span class="bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded">Success</span>
 <span class="bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded">Warning</span>
-{{< /example >}}
+```
 
 ## Large badges
 
 Use the `text-sm` utility class and increase the paddings to create a larger variant of the badges.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="bg-brand-softer text-fg-brand-strong text-sm font-medium px-2 py-1 rounded">Brand</span>
 <span class="bg-neutral-primary-soft text-heading text-sm font-medium px-2 py-1 rounded">Alternative</span>
 <span class="bg-neutral-secondary-medium text-heading text-sm font-medium px-2 py-1 rounded">Gray</span>
 <span class="bg-danger-soft text-fg-danger-strong text-sm font-medium px-2 py-1 rounded">Danger</span>
 <span class="bg-success-soft text-fg-success-strong text-sm font-medium px-2 py-1 rounded">Success</span>
 <span class="bg-warning-soft text-fg-warning text-sm font-medium px-2 py-1 rounded">Warning</span>
-{{< /example >}}
+```
 
 ## Large bordered badges
 
 Use these examples to create large and bordered styled badges.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-brand-subtle text-fg-brand-strong text-sm font-medium rounded bg-brand-softer">Brand</span>
 <span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-default text-heading text-sm font-medium rounded bg-neutral-primary-soft">Alternative</span>
 <span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-default-medium text-heading text-sm font-medium rounded bg-neutral-secondary-medium">Gray</span>
 <span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-danger-subtle text-fg-danger-strong text-sm font-medium rounded bg-danger-soft">Danger</span>
 <span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-success-subtle text-fg-success-strong text-sm font-medium rounded bg-success-soft">Success</span>
 <span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-warning-subtle text-fg-warning text-sm font-medium rounded bg-warning-soft">Warning</span>
-{{< /example >}}
+```
 
 ## Pill badges
 
 Use this example to make the corners even more rounded like pills for the badge component.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="bg-brand-softer text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Brand</span>
 <span class="bg-neutral-primary-soft text-heading text-xs font-medium px-1.5 py-0.5 rounded-fullm">Alternative</span>
 <span class="bg-neutral-secondary-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded-full">Gray</span>
 <span class="bg-danger-soft text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Danger</span>
 <span class="bg-success-soft text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Success</span>
 <span class="bg-warning-soft text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded-full">Warning</span>
-{{< /example >}}
+```
 
 ## Pill bordered badges
 
 Use this example to create a more rounded styles pill badge with borders.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Brand</span>
 <span class="bg-neutral-primary-soft border border-default text-heading text-xs font-medium px-1.5 py-0.5 rounded-full">Alternative</span>
 <span class="bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded-full">Gray</span>
 <span class="bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Danger</span>
 <span class="bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Success</span>
 <span class="bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded-full">Warning</span>
-{{< /example >}}
+```
 
 ## Badges as links
 
 You can also use badges as anchor elements to link to another page.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <a href="#" class="bg-brand-softer hover:bg-brand-soft border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">Brand</a>
 <a href="#" class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium border border-default text-heading text-xs font-medium px-1.5 py-0.5 rounded">Alternative</a>
 <a href="#" class="bg-neutral-secondary-medium hover:bg-neutral-tertiary-medium border border-default-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded">Gray</a>
 <a href="#" class="bg-danger-soft hover:bg-danger-medium border border-danger-subtle text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded">Danger</a>
 <a href="#" class="bg-success-soft hover:bg-success-medium border border-success-subtle text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded">Success</a>
 <a href="#" class="bg-warning-soft hover:bg-warning-medium border border-warning-subtle text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded">Warning</a>
-{{< /example >}}
+```
 
 ## Badges with icon
 
 You can also use [SVG icons](https://flowbite.com/icons/) inside the badge elements.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">
 <svg class="w-3 h-3 me-1" 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="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
 2 mins ago
@@ -135,13 +122,13 @@ You can also use [SVG icons](https://flowbite.com/icons/) inside the badge eleme
 <svg class="w-3 h-3 me-1" 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="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
 2 mins agong
 </span>
-{{< /example >}}
+```
 
 ## Large badges with icon
 
 Use these large badges with SVG icons for an enhanced representation.
 
-{{< example class="flex-wrap justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="inline-flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-sm font-medium leading-none px-2 py-1 rounded">
 <svg class="w-3.5 h-3.5 me-1.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="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
 2 mins ago
@@ -166,13 +153,13 @@ Use these large badges with SVG icons for an enhanced representation.
 <svg class="w-3.5 h-3.5 me-1.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="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
 2 mins agong
 </span>
-{{< /example >}}
+```
 
 ## Badges with only icon
 
 Alternatively, you can also use badges which indicate only a SVG icon.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="flex items-center justify-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium h-5 w-5 rounded-full">
 <svg class="w-3 h-3" 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="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
 </span>
@@ -191,13 +178,13 @@ Alternatively, you can also use badges which indicate only a SVG icon.
 <span class="flex items-center justify-center bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium h-5 w-5 rounded-full">
 <svg class="w-3 h-3" 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="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
 </span>
-{{< /example >}}
+```
 
 ## Large badges with only icon
 
 Use these large badge components with only an icon inside of them.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="flex items-center justify-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium h-6 w-6 rounded-full">
 <svg class="w-3.5 h-3.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="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
 </span>
@@ -216,13 +203,13 @@ Use these large badge components with only an icon inside of them.
 <span class="flex items-center justify-center bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium h-6 w-6 rounded-full">
 <svg class="w-3.5 h-3.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="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
 </span>
-{{< /example >}}
+```
 
 ## Badges with dot
 
 Use these badges with a dot for an alternative style of showing content.
 
-{{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">
 <span class="h-1.5 w-1.5 bg-fg-brand-strong rounded-full me-1"></span>
 2 mins ago
@@ -247,13 +234,13 @@ Use these badges with a dot for an alternative style of showing content.
 <span class="h-1.5 w-1.5 bg-fg-warning rounded-full me-1"></span>
 2 mins agong
 </span>
-{{< /example >}}
+```
 
 ## Badges with SVG loader
 
 Use this example to show an animated SVG loader inside the badge component.
 
-{{< example class="flex flex-wrap justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span class="flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded gap-1">
   <svg aria-hidden="true" role="status" class="w-3 h-3 me-1 animate-spin text-fg-brand" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="#1C64F2"/></svg>
   <span>2 mins ago</span>
@@ -278,13 +265,13 @@ Use this example to show an animated SVG loader inside the badge component.
   <svg aria-hidden="true" role="status" class="w-3 h-3 me-1 animate-spin text-warning-medium" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="#D03801"/></svg>
   <span>2 mins ago</span>
 </span>
-{{< /example >}}
+```
 
 ## Dismissible badges (chips)
 
 Use the `data-dismiss-target` data attribute to dismiss the current badge where the value is the id of the target element using a transition animation. These can be used as tags inside an input component.
 
-{{< example class="flex flex-wrap justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span id="badge-dismiss-brand" class="inline-flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium ps-1.5 pe-0.5 py-0.5 rounded gap-1">
 <span>Brand</span>
 <button type="button" class="inline-flex items-center p-0.5 text-sm bg-transparent rounded-xs hover:bg-brand-soft" data-dismiss-target="#badge-dismiss-brand" aria-label="Remove">
@@ -332,13 +319,13 @@ Use the `data-dismiss-target` data attribute to dismiss the current badge where
   <span class="sr-only">Remove badge</span>
 </button>
 </span>
-{{< /example >}}
+```
 
 ## Chips with avatar
 
 These components can be used to show avatar images inside of dismissible badges.
 
-{{< example class="flex flex-wrap justify-center gap-4" github="components/badge.md" show_dark=true >}}
+```html
 <span id="badge-avatar-dismiss-brand" class="inline-flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium ps-1.5 pe-0.5 py-0.5 rounded gap-1">
 <img class="w-3.5 h-3.5 rounded-full me-1" src="/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">
 Brand
@@ -392,29 +379,29 @@ Warning
   <span class="sr-only">Remove badge</span>
 </button>
 </span>
-{{< /example >}}
+```
 
 ## Notification badge
 
 Use the following example to show a badge inside of a button component.
 
-{{< example class="flex justify-center" github="components/badge.md" show_dark=true >}}
+```html
 <button type="button" class="relative 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 p-3 focus:outline-none">
   <svg class="w-5 h-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-width="2" d="m3.5 5.5 7.893 6.036a1 1 0 0 0 1.214 0L20.5 5.5M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"/></svg>
   <span class="sr-only">Notifications</span>
   <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">20</div>
 </button>
-{{< /example >}}
+```
 
 ## Button with badge
 
 Use this example to add a badge inside a button component for a count indicator.
 
-{{< example class="flex justify-center" github="components/badge.md" show_dark=true >}}
+```html
 <button type="button" class="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">
 Messages
 <span class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-white bg-danger rounded-full">
 2
 </span>
 </button>
-{{< /example >}}
+```

package/data/components/banner.md

@@ -1,17 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Sticky Banner - Flowbite
-description: Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS
-group: components
-toc: true
-requires_js: true
-
-previous: Badge
-previousLink: components/badge/
-next: Bottom Navigation
-nextLink: components/bottom-navigation/
----
-
 Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scroll down the main content area.
 
 Explore the following examples based on various styles, sizes, and positionings to leverage the sticky banner component and increase marketing conversions with a responsive element supporting dark mode.
@@ -20,8 +6,7 @@ Explore the following examples based on various styles, sizes, and positionings
 
 Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner.
 
-{{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
-
+```html
 <div id="sticky-banner" tabindex="-1" class="fixed top-0 start-0 z-50 flex justify-between w-full p-4 border-b border-default bg-neutral-primary-soft">
     <div class="flex items-center mx-auto">
         <p class="flex items-center text-sm font-normal text-body">
@@ -40,14 +25,13 @@ Use this free example to show a text message for announcement with a CTA link, a
     </div>
 </div>
 
-{{< /example >}}
+```
 
 ## Bottom banner position
 
 This example can be used to position the sticky banner to the bottom side of the page instead of the top side.
 
-{{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
-
+```html
 <div id="bottom-banner" tabindex="-1" class="fixed bottom-0 start-0 z-50 flex justify-between w-full p-4 border-t border-default bg-neutral-primary-soft">
     <div class="flex items-center mx-auto">
         <p class="flex items-center text-sm font-normal text-body">
@@ -68,14 +52,13 @@ This example can be used to position the sticky banner to the bottom side of the
         </button>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Marketing CTA banner
 
 Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner. Set a different width by using the `max-w-{*}` utility classes from Tailwind CSS.
 
-{{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
-
+```html
 <div id="marketing-banner" tabindex="-1" class="fixed z-50 flex flex-col md:flex-row justify-between w-[calc(100%-2rem)] p-4 -translate-x-1/2 bg-neutral-primary-soft border border-default rounded-base shadow-xs lg:max-w-7xl left-1/2 top-6">
     <div class="flex flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0">
         <a href="https://flowbite.com/" class="flex items-center mb-2 border-default md:pe-4 md:me-4 md:border-e md:mb-0">
@@ -94,14 +77,13 @@ Use this free example to show a text message for announcement with a CTA link, a
     </div>
 </div>
 
-{{< /example >}}
+```
 
 ## Newsletter sign-up banner
 
 This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page.
 
-{{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
-
+```html
 <div id="newsletter-banner" tabindex="-1" class="fixed top-0 start-0 z-50 flex justify-between w-full p-4 border-b border-default bg-neutral-primary-soft">
     <div class="flex items-center shrink-0 w-full mx-auto sm:w-auto">
         <form class="flex flex-col items-center w-full md:flex-row md:space-x-4 space-y-4 md:space-y-0">
@@ -117,14 +99,13 @@ This example can be used to encourage your website visitors to sign up to your e
         </button>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Informational banner
 
 This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links.
 
-{{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
-
+```html
 <div id="informational-banner" tabindex="-1" class="fixed top-0 start-0 z-50 flex flex-col justify-between w-full p-4 border-b border-default md:flex-row bg-neutral-secondary-soft">
     <div class="mb-4 md:mb-0 md:me-4">
         <h2 class="mb-1 text-base font-semibold text-heading">Integration is the key</h2>
@@ -138,7 +119,7 @@ This example can be used to share important information with your website visito
         </button>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## More examples
 

package/data/components/bottom-navigation.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Bottom Navigation - Flowbite
-description: Use the bottom navigation bar component to allow users to navigate through your website or create a control bar using a menu that is positioned at the bottom of the page
-group: components
-toc: true
-
-previous: Banner
-previousLink: components/banner/
-next: Breadcrumbs
-nextLink: components/breadcrumb/
----
-
 The bottom bar component can be used to allow menu items and certain control actions to be performed by the user through the usage of a fixed bar positioning to the bottom side of your page.
 
 Check out multiple examples of the bottom navigation component based on various styles, controls, sizes, content and leverage the utility classes from Tailwind CSS to integrate into your own project.
@@ -19,7 +6,7 @@ Check out multiple examples of the bottom navigation component based on various
 
 Use the default bottom navigation bar example to show a list of menu items as buttons to allow the user to navigate through your website based on a fixed position. You can also use anchor tags instead of buttons.
 
-{{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
+```html
 
 <div class="fixed bottom-0 left-0 z-50 w-full h-16 bg-neutral-primary-soft border-t border-default">
     <div class="grid h-full max-w-lg grid-cols-4 mx-auto font-medium">
@@ -41,13 +28,13 @@ Use the default bottom navigation bar example to show a list of menu items as bu
         </button>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Menu items with border
 
 This example can be used to show a border between the menu items inside the bottom navbar.
 
-{{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
+```html
 
 <div class="fixed bottom-0 left-0 z-50 w-full h-16 bg-neutral-primary-soft border-t border-default">
     <div class="grid h-full max-w-lg grid-cols-4 mx-auto font-medium">
@@ -69,13 +56,13 @@ This example can be used to show a border between the menu items inside the bott
         </button>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Application bar example
 
 Use this example to show a CTA button in the center of the navigation component to create new items.
 
-{{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
+```html
 
 <div class="fixed z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-neutral-primary-soft border border-default rounded-full bottom-4 left-1/2">
     <div class="grid h-full max-w-lg grid-cols-5 mx-auto">
@@ -123,13 +110,13 @@ Use this example to show a CTA button in the center of the navigation component
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Example with pagination
 
 This example be used to paginate multiple pages on a single view alongside other menu items.
 
-{{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
+```html
 
 <div class="fixed bottom-0 z-50 w-full h-16 -translate-x-1/2 bg-neutral-primary-soft border-t border-default left-1/2">
     <div class="grid h-full max-w-lg grid-cols-6 mx-auto">
@@ -180,11 +167,11 @@ This example be used to paginate multiple pages on a single view alongside other
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Button group bottom bar
 
-{{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
+```html
 
 <div class="fixed bottom-0 z-50 w-full -translate-x-1/2 bg-neutral-primary-soft border-t border-default left-1/2">
     <div class="w-full">
@@ -243,7 +230,7 @@ This example be used to paginate multiple pages on a single view alongside other
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Card with bottom bar
 
@@ -251,7 +238,7 @@ This example can be used to position a bottom navigation bar inside of a card el
 
 You can even use the other bottom navbar examples to exchange the default one presented here.
 
-{{< example class="flex items-center justify-center p-4" github="components/bottom-navigation.md" show_dark=true >}}
+```html
  
 <div class="relative w-full max-w-sm overflow-y-scroll bg-neutral-primary-soft border border-default shadow-xs rounded-base h-96">
     <ul>
@@ -318,13 +305,13 @@ You can even use the other bottom navbar examples to exchange the default one pr
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Online meeting control bar
 
 Use this component to show a list of options for online video meetings by showing a list of options such as muting the microphone, hiding the camera, adjusting the volume and more.
 
-{{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true disable_init_js=true show_dark=true >}}
+```html
 
 <div class="fixed bottom-0 left-0 z-50 grid w-full h-16 grid-cols-1 px-8 bg-neutral-primary-soft border-t border-default md:grid-cols-3">
     <div class="items-center justify-center hidden text-body me-auto md:flex">
@@ -409,13 +396,13 @@ Use this component to show a list of options for online video meetings by showin
         </div>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Video player bar
 
 Use this component to show control buttons for a video or audio that is playing in the browser to control the volume, navigate between videos, pause or start the video, and more.
 
-{{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" disable_init_js=true skeletonPlaceholders=true show_dark=true >}}
+```html
 
 <div class="fixed bottom-0 left-0 z-50 grid w-full h-24 grid-cols-1 px-8 bg-neutral-primary-soft border-t border-default md:grid-cols-3">
     <div class="items-center justify-center hidden me-auto md:flex">
@@ -510,4 +497,4 @@ Use this component to show control buttons for a video or audio that is playing
         </div>
     </div>
 </div>
-{{< /example >}}
+```

package/data/components/breadcrumb.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Breadcrumbs - Flowbite
-description: Show the location of the current page in a hierarchical structure using the Tailwind CSS breadcrumb components
-group: components
-toc: true
-
-previous: Bottom Navigation
-previousLink: components/bottom-navigation/
-next: Buttons
-nextLink: components/buttons/
----
-
 The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
 
 Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.
@@ -19,7 +6,7 @@ Flowbite includes two styles of breadcrumb elements, one that has a transparent
 
 Use the following breadcrumb example to show the hierarchical structure of pages.
 
-{{< example class="flex justify-center" github="components/breadcrumb.md" show_dark=true >}}
+```html
 
 <nav class="flex" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
@@ -43,13 +30,13 @@ Use the following breadcrumb example to show the hierarchical structure of pages
     </li>
   </ol>
 </nav>
-{{< /example >}}
+```
 
 ## Solid background
 
 You can alternatively also use the breadcrumb components with a solid background.
 
-{{< example class="flex justify-center" github="components/breadcrumb.md" show_dark=true >}}
+```html
 
 <!-- Breadcrumb -->
 <nav class="flex p-3 bg-neutral-secondary-medium border border-default-medium rounded-base" aria-label="Breadcrumb">
@@ -74,13 +61,13 @@ You can alternatively also use the breadcrumb components with a solid background
     </li>
   </ol>
 </nav>
-{{< /example >}}
+```
 
 ## Header breadcrumb
 
 Use this example to show a list of items such as the branches from GitHub and a dropdown component.
 
-{{< example class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}}
+```html
 
 <!-- Breadcrumb -->
 <nav class="flex-warp md:flex justify-between" aria-label="Breadcrumb">
@@ -124,13 +111,13 @@ Use this example to show a list of items such as the branches from GitHub and a
     </div>  
   </div>
 </nav>
-{{< /example >}}
+```
 
 ## Breadcrumb with dropdown
 
 Use this example to show dropdown components inside the breadcrumbs.
 
-{{< example class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}}
+```html
 
 <!-- Breadcrumb -->
 <nav class="flex justify-between" aria-label="Breadcrumb">
@@ -182,13 +169,13 @@ Use this example to show dropdown components inside the breadcrumbs.
     </li>
   </ol>
 </nav>
-{{< /example >}}
+```
 
 ## Breadcrumb with button
 
 Use a button with dropdown as the current page in a breadcrumb component.
 
-{{< example class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}}
+```html
 
 <nav class="flex" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
@@ -230,14 +217,14 @@ Use a button with dropdown as the current page in a breadcrumb component.
       </ul>
     </div>
 </nav>
-{{< /example >}}
+```
 
 
 ## Breadcrumb with navigation
 
 Use this example to navigate between pages with a button group component next to the breadcrumbs.
 
-{{< example class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}}
+```html
 
 <nav class="flex" aria-label="Breadcrumb">
   <div class="inline-flex shadow-xs -space-x-px me-2.5" role="group">
@@ -269,5 +256,5 @@ Use this example to navigate between pages with a button group component next to
     </li>
   </ol>
 </nav>
-{{< /example >}}
+```