flowbite-mcp 1.1.2 → 1.1.5

package/data/forms/radio.md

@@ -1,17 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Radio - Flowbite
-description: Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors
-group: forms
-toc: true
-requires_js: true
-
-previous: Checkbox
-previousLink: forms/checkbox/
-next: Toggle
-nextLink: forms/toggle/
----
-
 The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.
 
 Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the radio component.
@@ -20,7 +6,7 @@ Make sure that you have included Flowbite as a plugin inside your Tailwind CSS p
 
 Use the default example of a radio component with the checked and unchecked state.
 
-{{< example github="forms/radio.md" show_dark=true >}}
+```html
 <div class="flex items-center mb-4">
     <input id="default-radio-1" type="radio" value="" name="default-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
     <label for="default-radio-1" class="select-none ms-2 text-sm font-medium text-heading">Default radio</label>
@@ -29,13 +15,13 @@ Use the default example of a radio component with the checked and unchecked stat
     <input checked id="default-radio-2" type="radio" value="" name="default-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
     <label for="default-radio-2" class="select-none ms-2 text-sm font-medium text-heading">Checked state</label>
 </div>
-{{< /example >}}
+```
 
 ## Disabled state
 
 Apply the `disabled` attribute to the radio component to disallow the selection for the user.
 
-{{< example github="forms/radio.md" show_dark=true >}}
+```html
 <div class="flex items-center mb-4">
     <input disabled id="disabled-radio-1" type="radio" value="" name="disabled-radio" class="w-4 h-4 text-neutral-primary border-light-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
     <label for="disabled-radio-1" class="select-none ms-2 text-sm font-medium text-fg-disabled">Disabled radio</label>
@@ -44,24 +30,24 @@ Apply the `disabled` attribute to the radio component to disallow the selection
     <input disabled checked id="disabled-radio-2" type="radio" value="" name="disabled-radio" class="w-4 h-4 text-neutral-primary border-light bg-neutral-secondary-medium rounded-full checked:border-default-medium focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
     <label for="disabled-radio-2" class="select-none ms-2 text-sm font-medium text-fg-disabled">Disabled checked</label>
 </div>
-{{< /example >}}
+```
 
 ## Radio link
 
 Use this example if you want to include an anchor tag inside the label of the radio component.
 
-{{< example github="forms/radio.md" show_dark=true >}}
+```html
 <div class="flex items-center">
     <input id="link-radio" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
     <label for="link-radio" class="select-none ms-2 text-sm font-medium text-heading">Radio button with a <a href="#" class="text-fg-brand hover:underline font-medium">link inside</a>.</label>
 </div>
-{{< /example >}}
+```
 
 ## Helper text
 
 Get started with this example if you want to add a secondary text to the label for the radio component.
 
-{{< example github="forms/radio.md" show_dark=true >}}
+```html
 <div class="flex">
     <div class="flex items-center h-5">
         <input id="helper-radio" aria-describedby="helper-radio-text" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
@@ -71,13 +57,13 @@ Get started with this example if you want to add a secondary text to the label f
         <p id="helper-radio-text" class="text-xs font-normal text-body">For orders shipped from $25 in books or $29 in other categories</p>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Bordered
 
 Use this example to show a radio input elements inside a card with border.
 
-{{< example class="grid gap-6 md:grid-cols-2" github="forms/radio.md" show_dark=true >}}
+```html
 <div class="flex items-center ps-4 border border-default bg-neutral-primary-soft rounded-base">
     <input id="bordered-radio-1" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
     <label for="bordered-radio-1" class="w-full py-4 select-none ms-2 text-sm font-medium text-heading">Default radio</label>
@@ -86,13 +72,13 @@ Use this example to show a radio input elements inside a card with border.
     <input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
     <label for="bordered-radio-2" class="w-full py-4 select-none ms-2 text-sm font-medium text-heading">Checked state</label>
 </div>
-{{< /example >}}
+```
 
 ## Radio list group
 
 This example can be used to show a list of radio buttons inside a grouped list.
 
-{{< example github="components/radio.md" show_dark=true >}}
+```html
 <h3 class="mb-4 font-semibold text-heading">Identification</h3>
 <ul class="w-48 bg-neutral-primary-soft border border-default rounded-base">
     <li class="w-full border-b border-default">
@@ -120,13 +106,13 @@ This example can be used to show a list of radio buttons inside a grouped list.
         </div>
     </li>
 </ul>
-{{< /example >}}
+```
 
 ## Horizontal list group
 
 Use this example to group up radio button components inside a list.
 
-{{< example github="components/radio.md" show_dark=true >}}
+```html
 <h3 class="mb-4 font-semibold text-heading">Identification</h3>
 <ul class="items-center w-full text-sm font-medium text-heading bg-neutral-primary-soft border border-default rounded-lg sm:flex">
     <li class="w-full border-b border-default sm:border-b-0 sm:border-r">
@@ -154,17 +140,15 @@ Use this example to group up radio button components inside a list.
         </div>
     </li>
 </ul>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Radio in dropdown
 
 Here's an example of a list group that you can use right away.
 
-{{< example class="flex justify-center" github="components/radio.md" show_dark=true iframeHeight="370" >}}
+```html
 <button id="dropdownHelperRadioButton" data-dropdown-toggle="dropdownHelperRadio" class="inline-flex items-center justify-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" type="button">
   Dropdown button 
   <svg class="w-4 h-4 ms-1.5 -me-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="m19 9-7 7-7-7"/></svg>
@@ -214,13 +198,13 @@ Here's an example of a list group that you can use right away.
       </li>
     </ul>
 </div>
-{{< /example >}}
+```
 
 ## Inline layout
 
 Use the `flex` class for a wrapper element to horizontally align the radio elements.
 
-{{< example github="forms/radio.md" show_dark=true >}}
+```html
 <div class="flex">
     <div class="flex items-center me-4">
         <input id="inline-radio" type="radio" value="" name="inline-radio-group" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
@@ -239,13 +223,13 @@ Use the `flex` class for a wrapper element to horizontally align the radio eleme
         <label for="inline-disabled-radio" class="select-none ms-2 text-sm font-medium text-fg-disabled">Inline disabled</label>
     </div>
 </div>
-{{< /example >}}
+```
 
 ## Advanced layout
 
 Use this example of a more advanced radio component to add more information and update the style of the whole card instead of just the circled dot.
 
-{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}
+```html
 <h3 class="mb-5 text-lg font-medium text-gray-900 dark:text-white">How much do you expect to use each month?</h3>
 <ul class="grid w-full gap-6 md:grid-cols-2">
     <li>
@@ -270,13 +254,13 @@ Use this example of a more advanced radio component to add more information and
     </li>
 </ul>
 
-{{< /example >}}
+```
 
 ## Advanced layout with icons
 
 Use this example to show an advanced layout of radio button elements with icons.
 
-{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}
+```html
 <h3 class="mb-4 text-lg font-medium text-heading">Choose technology:</h3>
 <ul class="select-none grid w-full gap-4 md:grid-cols-3">
     <li>
@@ -311,5 +295,5 @@ Use this example to show an advanced layout of radio button elements with icons.
     </li>
 </ul>
 
-{{< /example >}}
+```
 

package/data/forms/range.md

@@ -1,17 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Range Slider - Flowbite
-description: Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options
-group: forms
-toc: true
-requires_js: true
-
-previous: Toggle
-previousLink: forms/toggle/
-next: Floating Label
-nextLink: forms/floating-label/
----
-
 The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation.
 
 The examples on this page are all coded with Tailwind CSS and requires you to install Flowbite as a plugin inside your project to obtain all the necessary stylings.
@@ -20,43 +6,43 @@ The examples on this page are all coded with Tailwind CSS and requires you to in
 
 Get started with this default example with values from 1 to 100 and the default value of 50.
 
-{{< example github="forms/range.md" show_dark=true >}}
+```html
 <label for="default-range" class="block mb-2.5 text-sm font-medium text-heading">Default range</label>
 <input id="default-range" type="range" value="50" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer">
-{{< /example >}}
+```
 
 ## Disabled state
 
 Apply the `disabled` class to disallow the users from further selecting values.
 
-{{< example github="forms/range.md" show_dark=true >}}
+```html
 <label for="disabled-range" class="block mb-2.5 text-sm font-medium text-heading">Default range</label>
 <input id="disabled-range" type="range" value="50" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer" disabled>
-{{< /example >}}
+```
 
 ## Min and max
 
 Use the min and max attributes on the range component to set the limits of the range values.
 
-{{< example github="forms/range.md" show_dark=true >}}
+```html
 <label for="minmax-range" class="block mb-2.5 text-sm font-medium text-heading">Min-max range</label>
 <input id="minmax-range" type="range" min="0" max="10" value="5" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer">
-{{< /example >}}
+```
 
 ## Steps
 
 Use the step attribute on the range component to set the increment with which the values will change.
 
-{{< example github="forms/range.md" show_dark=true >}}
+```html
 <label for="steps-range" class="block mb-2.5 text-sm font-medium text-heading">Range steps</label>
 <input id="steps-range" type="range" min="0" max="5" value="2.5" step="0.5" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer">
-{{< /example >}}
+```
 
 ## Sizes
 
 Apply the small, default, and large sizes for the range component by applying the `range-sm` and `range-lg` utility classes from Flowbite and Tailwind CSS.
 
-{{< example github="forms/range.md" show_dark=true >}}
+```html
 <label for="small-range" class="block mb-2.5 text-sm font-medium text-heading">Small range</label>
 <input id="small-range" type="range" value="50" class="w-full h-1 mb-6 bg-neutral-quaternary rounded-full appearance-none cursor-pointer range-sm">
 
@@ -65,13 +51,13 @@ Apply the small, default, and large sizes for the range component by applying th
 
 <label for="large-range" class="block mb-2.5 text-sm font-medium text-heading">Large range</label>
 <input id="large-range" type="range" value="50" class="w-full h-3 bg-neutral-quaternary rounded-full appearance-none cursor-pointer range-lg">
-{{< /example >}}
+```
 
 ## Labels
 
 Use the following example to add labels to each value milestone of the range slider component.
 
-{{< example github="forms/range.md" show_dark=true >}}
+```html
 <div class="relative mb-6">
     <label for="labels-range-input" class="sr-only">Labels range</label>
     <input id="labels-range-input" type="range" value="1000" min="100" max="1500" class="w-full h-2 bg-neutral-quaternary rounded-full appearance-none cursor-pointer">
@@ -80,4 +66,4 @@ Use the following example to add labels to each value milestone of the range sli
     <span class="text-sm text-body absolute start-2/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">$1000</span>
     <span class="text-sm text-body absolute end-0 -bottom-6">Max ($1500)</span>
 </div>
-{{< /example >}}
+```

package/data/forms/search-input.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Search Input - Flowbite
-description: Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes
-group: forms
-toc: true
-
-previous: File Input
-previousLink: forms/file-input/
-next: Number Input
-nextLink: forms/number-input/
----
-
 The search input component can be used to let your users search through your website using string queries and it comes in multiple styles, variants, and sizes built with the utility classes from Tailwind CSS.
 
 You will also find more advanced search components on this page including dropdown category selections, search buttons positioned inside the input field, voice search fields and more.
@@ -19,7 +6,7 @@ You will also find more advanced search components on this page including dropdo
 
 Get started with the default example of a search input component including and icon and submit button.
 
-{{< example github="forms/search-input.md" show_dark=true >}}
+```html
 <form class="max-w-md mx-auto">   
     <label for="search" class="block mb-2.5 text-sm font-medium text-heading sr-only ">Search</label>
     <div class="relative">
@@ -30,17 +17,15 @@ Get started with the default example of a search input component including and i
         <button type="button" class="absolute end-1.5 bottom-1.5 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 text-xs px-3 py-1.5 focus:outline-none">Search</button>
     </div>
 </form>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Search with dropdown
 
 Use this search component with a dropdown to let your users select a category in which they would like the search query to be targeted in.
 
-{{< example github="forms/search-input.md" show_dark=true iframeHeight="290" >}}
+```html
 <form class="max-w-2xl mx-auto">
     <div class="flex shadow-xs rounded-base -space-x-0.5">
         <label for="search-dropdown" class="block mb-2.5 text-sm font-medium text-heading sr-only ">Your Email</label>
@@ -72,13 +57,13 @@ Use this search component with a dropdown to let your users select a category in
         </button>
     </div>
 </form>
-{{< /example >}}
+```
 
 ## Simple search input
 
 Use the simplest form of a search input component with an icon and a search button next to the text field.
 
-{{< example github="forms/search-input.md" show_dark=true >}}
+```html
 <form class="flex items-center max-w-sm mx-auto space-x-2">   
     <label for="simple-search" class="sr-only">Search</label>
     <div class="relative w-full">
@@ -92,17 +77,15 @@ Use the simplest form of a search input component with an icon and a search butt
         <span class="sr-only">Icon description</span>
     </button>
 </form>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Location search
 
 Use this example where you can select a country in which you want to search for an address or city.
 
-{{< example github="forms/search-input.md" show_dark=true iframeHeight="290" >}}
+```html
 <form class="max-w-lg mx-auto">
     <div class="flex shadow-xs rounded-base -space-x-0.5">
         <label for="search-dropdown-location" class="block mb-2.5 text-sm font-medium text-heading sr-only ">Choose city</label>
@@ -198,13 +181,13 @@ Use this example where you can select a country in which you want to search for
         </button>
     </div>
 </form>
-{{< /example >}}
+```
 
 ## Voice search
 
 Get started with this example if you would like to enable voice search for your website and users.
 
-{{< example github="forms/search-input.md" show_dark=true >}}
+```html
 <form class="flex items-center max-w-lg mx-auto space-x-2">   
     <label for="voice-search" class="sr-only">Search</label>
     <div class="relative w-full">
@@ -221,13 +204,13 @@ Get started with this example if you would like to enable voice search for your
         Search
     </button>
 </form>
-{{< /example >}}
+```
 
 ## Advanced search input
 
 Use this example to show multiple dropdown selection elements next to the search field.
 
-{{< example github="forms/search-input.md" show_dark=true iframeHeight="290" >}}
+```html
 
 <form class="max-w-2xl mx-auto">
     <div class="flex shadow-xs rounded-base -space-x-0.5">
@@ -277,4 +260,4 @@ Use this example to show multiple dropdown selection elements next to the search
     </div>
 </form>
 
-{{< /example >}}
+```

package/data/forms/select.md

@@ -1,23 +1,10 @@
----
-layout: docs
-title: Tailwind CSS Select - Flowbite
-description: Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants
-group: forms
-toc: true
-
-previous: Phone Input
-previousLink: forms/phone-input/
-next: Textarea
-nextLink: forms/textarea/
----
-
 The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.
 
 ## Select input example
 
 Get started with the default example of a select input component to get a single option selection.
 
-{{< example github="forms/select.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="countries" class="block mb-2.5 text-sm font-medium text-heading">Select an option</label>
   <select id="countries" class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body">
@@ -28,13 +15,13 @@ Get started with the default example of a select input component to get a single
     <option value="DE">Germany</option>
   </select>
 </form>
-{{< /example >}}
+```
 
 ## Multiple options
 
 Apply the `multiple` attribute to the select component to allow users to select one or more options.
 
-{{< example github="forms/select.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="countries_multiple" class="block mb-2.5 text-sm font-medium text-heading">Select an option</label>
   <select multiple id="countries_multiple" class="block w-full bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand px-3 py-2.5 shadow-xs placeholder:text-body">
@@ -45,13 +32,13 @@ Apply the `multiple` attribute to the select component to allow users to select
     <option value="DE">Germany</option>
   </select>
 </form>
-{{< /example >}}
+```
 
 ## Size attribute
 
 Use the size attribute for the select component to specify the number of visible options in the list.
 
-{{< example github="forms/select.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="years" class="block mb-2.5 text-sm font-medium text-heading">Select an option</label>
   <select id="years" size="5" class="block w-full bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand px-3 py-2.5 shadow-xs placeholder:text-body">
@@ -64,13 +51,13 @@ Use the size attribute for the select component to specify the number of visible
     <option>2022</option>
   </select>
 </form>
-{{< /example >}}
+```
 
 ## Disabled state
 
 Apply the `disable` state to the select component to disallow the selection of new options.
 
-{{< example github="forms/select.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="countries_disabled" class="block mb-2.5 text-sm font-medium text-heading">Select an option</label>
   <select disabled id="countries_disabled" class="block w-full bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand px-3 py-2.5 shadow-xs text-fg-disabled">
@@ -81,13 +68,13 @@ Apply the `disable` state to the select component to disallow the selection of n
     <option value="DE">Germany</option>
   </select>
 </form>
-{{< /example >}}
+```
 
 ## Underline select
 
 Use the underline style for the select component as an alternative appearance.
 
-{{< example github="forms/select.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="underline_select" class="sr-only">Underline select</label>
   <select id="underline_select" class="block py-2.5 ps-0 w-full text-sm text-body bg-transparent border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand peer">
@@ -98,17 +85,15 @@ Use the underline style for the select component as an alternative appearance.
       <option value="DE">Germany</option>
   </select>
 </form>
-{{< /example >}}
+```
+
 
-<div class="mt-8 -mb-5">
-  {{< requires_js >}}
-</div>
 
 ## Select with dropdown
 
 Use this example if you want to create a multi-level dropdown and select component combination.
 
-{{< example github="forms/select.md" show_dark=true iframeHeight="340" >}}
+```html
 <form class="max-w-sm mx-auto">
   <div class="flex">
       <button id="dropdown-states-button" data-dropdown-toggle="dropdown-states" type="button" class="inline-flex items-center shrink-0 z-10 text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-fg-brand focus:ring-4 focus:ring-neutral-tertiary font-medium leading-5 rounded-s-base text-sm px-4 py-2.5 focus:outline-none">
@@ -215,13 +200,13 @@ Use this example if you want to create a multi-level dropdown and select compone
       </select>
   </div>
 </form>
-{{< /example >}}
+```
 
 ## Sizes
 
 Get started with the small, default, and large sizes for the select component from the example below.
 
-{{< example github="forms/select.md" show_dark=true >}}
+```html
 <form class="max-w-sm mx-auto">
   <label for="small" class="block mb-2.5 text-sm font-medium text-heading">Small select</label>
   <select id="small" class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body mb-4">
@@ -256,4 +241,4 @@ Get started with the small, default, and large sizes for the select component fr
     <option value="DE">Germany</option>
   </select>
 </form>
-{{< /example >}}
+```

package/data/forms/textarea.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Textarea - Flowbite
-description: Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants
-group: forms
-toc: true
-
-previous: Select
-previousLink: forms/select/
-next: Timepicker
-nextLink: forms/timepicker/
----
-
 The textarea component is a multi-line text field input that can be used to receive longer chunks of text from the user in the form of a comment box, description field, and more.
 
 From the examples on this page you will find multiple styles and variants of the textarea component coded with the utility classes from Tailwind CSS including a WYSIWYG editor, comment box, chatroom textarea, all available in dark mode as well. 
@@ -19,16 +6,16 @@ From the examples on this page you will find multiple styles and variants of the
 
 Get started with the default example of a textarea component below.
 
-{{< example github="forms/textarea.md" show_dark=true >}}
+```html
 <label for="message" class="block mb-2.5 text-sm font-medium text-heading">Your message</label>
 <textarea id="message" rows="4" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body" placeholder="Write your thoughts here..."></textarea>
-{{< /example >}}
+```
 
 ## WYSIWYG Editor
 
 If you want to add other actions as buttons alongside your textarea component, such as with a WYSIWYG editor, then you can use the example below.
 
-{{< example github="forms/textarea.md" show_dark=true >}}
+```html
 <form>
    <div class="w-full mb-4 border border-default-medium rounded-base bg-neutral-secondary-medium shadow-xs">
        <div class="flex items-center justify-between px-3 py-2 border-b border-default-medium">
@@ -90,13 +77,13 @@ If you want to add other actions as buttons alongside your textarea component, s
    </div>
     <button type="submit" 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">Publish post</button>
 </form>
-{{< /example >}}
+```
 
 ## Comment box
 
 Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.
 
-{{< example github="forms/textarea.md" show_dark=true >}}
+```html
 <form>
    <div class="w-full mb-4 border border-default-medium rounded-base bg-neutral-secondary-medium shadow-xs">
        <div class="px-4 py-2 bg-neutral-secondary-medium rounded-t-base">
@@ -127,13 +114,13 @@ Most often the textarea component is used as the main text field input element i
    </div>
 </form>
 <p class="ms-auto text-xs text-body">Remember, contributions to this topic should follow our <a href="#" class="text-fg-brand hover:underline">Community Guidelines</a>.</p>
-{{< /example >}}
+```
 
 ## Chatroom input
 
 If you want to build a chatroom component you will usually want to use a textarea element to allow users to write multi-line chunks of text.
 
-{{< example github="forms/textarea.md" show_dark=true >}}
+```html
 <form>
     <label for="chat" class="sr-only">Your message</label>
     <div class="flex items-center px-3 py-2 rounded-base bg-neutral-secondary-soft">
@@ -152,4 +139,4 @@ If you want to build a chatroom component you will usually want to use a textare
         </button>
     </div>
 </form>
-{{< /example >}}
+```