flowbite-mcp 1.1.2 → 1.1.5

package/data/typography/images.md

@@ -1,36 +1,23 @@
----
-layout: docs
-title: Tailwind CSS Images - Flowbite
-description: The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations
-group: typography
-toc: true
-
-previous: Blockquote
-previousLink: typography/blockquote/
-next: Lists
-nextLink: typography/lists/
----
-
 Get started with a collection of responsive image components coded with the utility classes from Tailwind CSS that you can use inside articles, cards, sections, and other components based on multiple styles, sizes, layouts, and hover animations.
 
 ## Default image
 
 Use this example to show the a responsive image that won't grow beyond the maximum original width.
 
-{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-full" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ## Image caption
 
 This example can be used to add a caption for the image often used inside articles.
 
-{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+```html
 <figure class="max-w-lg">
   <img class="h-auto max-w-full rounded-base" src="/docs/images/examples/image-3@2x.jpg" alt="image description">
   <figcaption class="mt-2 text-sm text-center text-body">Image caption</figcaption>
 </figure>
-{{< /example >}}
+```
 
 ## Rounded corners
 
@@ -40,39 +27,39 @@ Apply rounded corners to the image by using the specific utility classes from Ta
 
 Use this example to apply rounded corners to the image by using the `rounded-{size}` class where the size can be anything from small to extra large.
 
-{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-lg rounded-base" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ### Full circle
 
 Use this example to mask the image inside a circle using the `rounded-full` utility class from Tailwind CSS.
 
-{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+```html
 <img class="rounded-full w-96 h-96" src="/docs/images/examples/image-4@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ## Image shadow
 
 This example can be used to show a shadow effect for the image using the `shadow-{size}` utility class.
 
-{{< example class="flex justify-center pb-8" github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-xl rounded-base shadow-xl dark:shadow-gray-800" src="/docs/images/examples/image-2@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ## Retina-ready
 
 Use the `srcset` attribute to set Retina-ready images with double resolution.
 
-{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+```html
 <img srcset="/docs/images/examples/image-1.jpg 1x, /docs/images/examples/image-1@2x.jpg 2x" class="w-full h-auto max-w-xl rounded-base" alt="image description">
-{{< /example >}}
+```
 
 ## Image card
 
 Use this example to make the image a card item with a link and a short text description.
 
-{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+```html
 <figure class="relative max-w-sm transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0">
   <a href="#">
     <img class="rounded-base" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png" alt="image description">
@@ -81,7 +68,7 @@ Use this example to make the image a card item with a link and a short text desc
       <p>Do you want to get notified when a new component is added to Flowbite?</p>
   </figcaption>
 </figure>
-{{< /example >}}
+```
 
 ## Image effects
 
@@ -91,17 +78,17 @@ Use image effects such as grayscale or blur to change the appearances of the ima
 
 Use the filter option and apply a grayscale to the image element using the `grayscale` class.
 
-{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-lg transition-all duration-300 rounded-base cursor-pointer filter grayscale hover:grayscale-0" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png" alt="image description">
-{{< /example >}}
+```
 
 ### Blur
 
 Apply a blur by using the `blur-{size}` utility class from Tailwind CSS to an image component.
 
-{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-lg transition-all duration-300 rounded-base blur-xs hover:blur-none" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png" alt="image description">
-{{< /example >}}
+```
 
 ## Alignment
 
@@ -111,25 +98,25 @@ Align the image component to the left, center or right side of the document page
 
 By default, the image component will be aligned to the left side of the page.
 
-{{< example github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-lg" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ### Center
 
 Horizontally align the image to the center of the page using the `mx-auto` class.
 
-{{< example github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-lg mx-auto" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ### Right
 
 Use the `ml-auto` (or `ms-auto`) class to align the image to the right side of the page.
 
-{{< example github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-lg ms-auto" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ## Sizes
 
@@ -139,30 +126,30 @@ Set the size of the image using the `w-{size}` and `h-{size}` or `max-w-{size}`
 
 Use the `max-w-xs` class to set a small size of the image.
 
-{{< example github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-xs" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ### Medium
 
 Use the `max-w-md` class to set a medium size of the image.
 
-{{< example github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-md" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ### Large
 
 Use the `max-w-xl` class to set a large size of the image.
 
-{{< example github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-xl" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
-{{< /example >}}
+```
 
 ### Full width
 
 Use the `max-w-full` class to set the full width of the image as long as it doesn't become larger than the original source.
 
-{{< example github="typography/images.md" show_dark=true >}}
+```html
 <img class="h-auto max-w-full" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
-{{< /example >}}
+```

package/data/typography/links.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Links - Flowbite
-description: The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card
-group: typography
-toc: true
-
-previous: Lists
-previousLink: typography/lists/
-next: Text
-nextLink: typography/text/
----
-
 Get started with the link component to enable hyperlinks across pages and external websites applied to elements such as inline text, buttons, cards, inside paragraphs, and more.
 
 Hyperlinks are a great way to reduce bounce rate of the current page and encourage visitors to browse your website and become a returning user.
@@ -19,66 +6,66 @@ Hyperlinks are a great way to reduce bounce rate of the current page and encoura
 
 Use this example to set default styles to an inline link element.
 
-{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+```html
 <a href="#" class="font-medium text-fg-brand hover:underline">Read more</a>
-{{< /example >}}
+```
 
 ## Button
 
 This example can be used to set a hyperlink on a button component.
 
-{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+```html
 <a href="#" 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">Read more</a>
-{{< /example >}}
+```
 
 ## Paragraph
 
 Use this example to set a link inside a paragraph with an underline style.
 
-{{< example github="typography/links.md" show_dark=true >}}
+```html
 <p class="text-body">The free updates that will be provided is based on the <a href="#" class="font-medium text-fg-brand underline hover:no-underline">roadmap</a> that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well.</p>
-{{< /example >}}
+```
 
 ## Icon link
 
 This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) inside the hyperlink element.
 
-{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+```html
 <p class="text-body">500,000 people & companies have made over a million apps with Glide. <a href="#" class="inline-flex items-center font-medium text-fg-brand hover:underline">
 Read their stories
 <svg class="w-5 h-5 ms-1 rtl:rotate-180" 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="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
 </a></p>
 
-{{< /example >}}
+```
 
 ## CTA link
 
 Use this example to set a hyperlink on a CTA element with text and a custom icon.
 
-{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+```html
 <a href="#" class="inline-flex items-center justify-center p-5 text-base font-medium border border-default hover:border-default-medium text-body rounded-base bg-neutral-secondary-soft hover:text-heading hover:bg-neutral-tertiary">
     <svg aria-hidden="true" class="w-5 h-5 me-3" viewBox="0 0 22 31" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4151_63004)"><path d="M5.50085 30.1242C8.53625 30.1242 10.9998 27.8749 10.9998 25.1035V20.0828H5.50085C2.46546 20.0828 0.00195312 22.332 0.00195312 25.1035C0.00195312 27.8749 2.46546 30.1242 5.50085 30.1242Z" fill="#0ACF83"/><path d="M0.00195312 15.062C0.00195312 12.2905 2.46546 10.0413 5.50085 10.0413H10.9998V20.0827H5.50085C2.46546 20.0827 0.00195312 17.8334 0.00195312 15.062Z" fill="#A259FF"/><path d="M0.00195312 5.02048C0.00195312 2.24904 2.46546 -0.000244141 5.50085 -0.000244141H10.9998V10.0412H5.50085C2.46546 10.0412 0.00195312 7.79193 0.00195312 5.02048Z" fill="#F24E1E"/><path d="M11 -0.000244141H16.4989C19.5343 -0.000244141 21.9978 2.24904 21.9978 5.02048C21.9978 7.79193 19.5343 10.0412 16.4989 10.0412H11V-0.000244141Z" fill="#FF7262"/><path d="M21.9978 15.062C21.9978 17.8334 19.5343 20.0827 16.4989 20.0827C13.4635 20.0827 11 17.8334 11 15.062C11 12.2905 13.4635 10.0413 16.4989 10.0413C19.5343 10.0413 21.9978 12.2905 21.9978 15.062Z" fill="#1ABCFE"/></g><defs><clipPath id="clip0_4151_63004"><rect width="22" height="30.1244" fill="white" transform="translate(0 -0.000244141)"/></clipPath></defs></svg>                                              
     <span class="w-full">Get started with our  Figma Design System</span>
     <svg class="w-6 h-6 ms-1 rtl:rotate-180" 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="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
 </a> 
-{{< /example >}}
+```
 
 ## Card link
 
 Use this example to set a hyperlink on a card component.
 
-{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+```html
 <a href="#" class="bg-neutral-primary-soft block max-w-sm p-6 border border-default rounded-base shadow-xs hover:bg-neutral-secondary-medium">
     <h5 class="mb-3 text-2xl font-semibold tracking-tight text-heading leading-8">Noteworthy technology acquisitions 2021</h5>
     <p class="text-body">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
 </a>
-{{< /example >}}
+```
 
 ## Image link
 
 This example can be used to set a hyperlink on an image inside a card component.
 
-{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+```html
 <div class="bg-neutral-primary-soft block max-w-sm border border-default rounded-base shadow-xs">
     <a href="#">
         <img class="rounded-t-base" src="/docs/images/blog/image-1.jpg" alt="" />
@@ -97,13 +84,13 @@ This example can be used to set a hyperlink on an image inside a card component.
         </a>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Card inner link
 
 Use this example to show a highlighted link inside a card component.
 
-{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+```html
 <div class="bg-neutral-primary-soft block max-w-sm p-6 border border-default rounded-base shadow-xs">
     <svg class="w-7 h-7 mb-3 text-body" 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="M10 21v-9m3-4H7.5a2.5 2.5 0 1 1 0-5c1.5 0 2.875 1.25 3.875 2.5M14 21v-9m-9 0h14v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-8ZM4 8h16a1 1 0 0 1 1 1v3H3V9a1 1 0 0 1 1-1Zm12.155-5c-3 0-5.5 5-5.5 5h5.5a2.5 2.5 0 0 0 0-5Z"/></svg>
     <a href="#">
@@ -115,4 +102,4 @@ Use this example to show a highlighted link inside a card component.
         <svg class="w-4 h-4 ms-2 rtl:rotate-[270deg]" 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="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"/></svg>
     </a>
 </div>
-{{< /example >}}
+```

package/data/typography/lists.md

@@ -1,23 +1,10 @@
----
-layout: docs
-title: Tailwind CSS Lists - Flowbite
-description: Use the list component to show an unordered or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite
-group: typography
-toc: true
-
-previous: Images
-previousLink: typography/images/
-next: Links
-nextLink: typography/links/
----
-
 Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.
 
 ## Unordered list
 
 Use this example to create a default unordered list of items using the `list-disc` class.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <h2 class="mb-2 text-lg font-medium text-heading">Password requirements:</h2>
 <ul class="max-w-md space-y-1 text-body list-disc list-inside">
     <li>
@@ -30,13 +17,13 @@ Use this example to create a default unordered list of items using the `list-dis
         Inclusion of at least one special character, e.g., ! @ # ?
     </li>
 </ul>
-{{< /example >}}
+```
 
 ### Icons
 
 This example can be used to apply custom icons instead of the default bullets for the list items.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <h2 class="mb-2 text-lg font-medium text-heading">Password requirements:</h2>
 <ul class="max-w-md space-y-1 text-body list-inside">
     <li class="flex items-center">
@@ -52,13 +39,13 @@ This example can be used to apply custom icons instead of the default bullets fo
         At least one special character, e.g., ! @ # ?
     </li>
 </ul>
-{{< /example >}}
+```
 
 ### Nested
 
 Use this example to nested another list of items inside the parent list element.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <ul class="space-y-4 text-body list-disc list-inside">
     <li>
         List item one
@@ -85,13 +72,13 @@ Use this example to nested another list of items inside the parent list element.
         </ul>
     </li>
 </ul>
-{{< /example >}}
+```
 
 ### Unstyled
 
 Use the `list-none` class to disable the list style bullets or numbers.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <h2 class="mb-3 text-lg font-medium text-heading">Password requirements:</h2>
 <ul class="max-w-md space-y-2 text-body list-none list-inside">
     <li>
@@ -104,13 +91,13 @@ Use the `list-none` class to disable the list style bullets or numbers.
         Inclusion of at least one special character, e.g., ! @ # ?
     </li>
 </ul>
-{{< /example >}}
+```
 
 ## Ordered list
 
 Use the `<ol>` tag to create an ordered list of items with numbers.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <h2 class="mb-3 text-lg font-medium text-heading">Top students:</h2>
 <ol class="max-w-md space-y-2 text-body list-decimal list-inside">
     <li>
@@ -123,13 +110,13 @@ Use the `<ol>` tag to create an ordered list of items with numbers.
         <span class="font-medium text-heading">Leslie Livingston</span> with <span class="font-medium text-heading">57</span> points
     </li>
 </ol>
-{{< /example >}}
+```
 
 ### Nested
 
 This example can be used to nest multiple lists into each other.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <ol class="space-y-4 text-body list-decimal list-inside">
    <li>
       List item one
@@ -156,13 +143,13 @@ This example can be used to nest multiple lists into each other.
       </ul>
    </li>
 </ol>
-{{< /example >}}
+```
 
 ## Description list
 
 Create a description list by using the `<dl>` tag and set the term and name with the following example.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <dl class="max-w-md text-heading divide-y divide-default">
     <div class="flex flex-col pb-3">
         <dt class="mb-1 text-body">Email address</dt>
@@ -177,13 +164,13 @@ Create a description list by using the `<dl>` tag and set the term and name with
         <dd class="text-lg font-medium">+00 123 456 789 / +12 345 678</dd>
     </div>
 </dl>
-{{< /example >}}
+```
 
 ## List with icons
 
 Use this example to create a list of items with [custom SVG icons](https://flowbite.com/icons/) instead of the default bullets.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <ul class="space-y-4 text-left text-body">
     <li class="flex items-center space-x-3 rtl:space-x-reverse">
          <svg class="w-4 h-4 text-fg-success shrink-0 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="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
@@ -206,13 +193,13 @@ Use this example to create a list of items with [custom SVG icons](https://flowb
         <span>Free updates: <span class="font-medium text-heading">6 months</span></span>
     </li>
 </ul>
-{{< /example >}}
+```
 
 ## Advanced layout
 
 This example can be used to show more details for each list item such as the user's name, email and profile picture.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <ul class="max-w-md divide-y divide-default">
    <li class="pb-3 sm:pb-4">
       <div class="flex items-center space-x-4 rtl:space-x-reverse">
@@ -305,13 +292,13 @@ This example can be used to show more details for each list item such as the use
       </div>
    </li>
 </ul>
-{{< /example >}}
+```
 
 ## Features list card
 
 Use this example to show a list of features inside a card component.
 
-{{< example github="typography/lists.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 mx-auto">
     <h5 class="mb-4 text-xl font-medium text-body">Standard plan</h5>
@@ -352,13 +339,13 @@ Use this example to show a list of features inside a card component.
     <button type="button" class="w-full text-white bg-brand hover:bg-brand-strong box-border border border-transparent 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">Choose plan</button>
 </div>
 
-{{< /example >}}
+```
 
 ## Horizontal list
 
 Use this example to create a horizontally aligned list of items.
 
-{{< example github="typography/lists.md" show_dark=true >}}
+```html
 <ul class="flex flex-wrap items-center justify-center text-heading">
     <li>
         <a href="#" class="me-4 hover:underline md:me-6 ">About</a>
@@ -382,6 +369,6 @@ Use this example to create a horizontally aligned list of items.
         <a href="#" class="me-4 hover:underline md:me-6">Contact</a>
     </li>
 </ul>
-{{< /example >}}
+```