From 559b8437504f7541d58a2d8b528e126140b056db Mon Sep 17 00:00:00 2001
From: Piotr Gusciora <pgusciora@mdbootstrap.com>
Date: Thu, 22 Jun 2023 15:09:26 +0200
Subject: [PATCH] changed related resources in tailwind forms data and methods

---
 .../docs/standard/data/charts/index.html      |  67 +++++++++--
 .../docs/standard/data/tables/index.html      |  82 +++++++++++---
 .../docs/standard/forms/checkbox/index.html   |  55 +++++----
 .../docs/standard/forms/datepicker/index.html |  60 ++++++++--
 .../docs/standard/forms/file-input/index.html |  52 ++++++---
 .../standard/forms/input-group/index.html     |  44 ++++----
 .../docs/standard/forms/inputs/index.html     |  50 +++------
 .../docs/standard/forms/login-form/index.html | 104 ++++++++++++++++++
 .../docs/standard/forms/radio/index.html      |  50 ++++++---
 .../docs/standard/forms/range/index.html      |  39 +++++--
 .../forms/registration-form/index.html        | 104 ++++++++++++++++++
 .../docs/standard/forms/search/index.html     |  63 ++++++++---
 .../docs/standard/forms/select/index.html     |  36 ++++--
 .../docs/standard/forms/switch/index.html     |  46 ++++++--
 .../docs/standard/forms/templates/index.html  |  65 +++++++----
 .../docs/standard/forms/textarea/index.html   |  48 ++++----
 .../docs/standard/forms/timepicker/index.html |  52 ++++++---
 .../docs/standard/methods/ripple/index.html   |  85 ++++++++++++--
 18 files changed, 845 insertions(+), 257 deletions(-)

diff --git a/site/content/docs/standard/data/charts/index.html b/site/content/docs/standard/data/charts/index.html
index aeea802e1..5aa0bf44d 100644
--- a/site/content/docs/standard/data/charts/index.html
+++ b/site/content/docs/standard/data/charts/index.html
@@ -2353,6 +2353,63 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/colors/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >colors</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/hover-state/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >hover state</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/arbitrary-values/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >arbitrary values</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/hsla-colors/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >hsla colors</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
     <!-- Main docs -->
     <a
       href="https://tailwind-elements.com/docs/standard/components/popover/"
@@ -2382,13 +2439,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/data/charts/"
-    >Bootstrap Charts</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/data/tables/index.html b/site/content/docs/standard/data/tables/index.html
index 2b95a6d9f..22775a1d4 100644
--- a/site/content/docs/standard/data/tables/index.html
+++ b/site/content/docs/standard/data/tables/index.html
@@ -1607,23 +1607,81 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/bootstrap-comparison-table/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/colors/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Comparison table</a
+      >colors</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/hover-state/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >hover state</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
     >
-
-    <!-- How to? -->
     <a
-      href="https://mdbootstrap.com/how-to/bootstrap/table-responsive/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/arbitrary-values/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >How to make table responsive in Bootstrap</a
+      >arbitrary values</a
     >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/flexbox/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >flexbox</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/text/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >text</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <!-- Main docs -->
+    <a
+      href="https://tailwind-elements.com/docs/standard/components/popover/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >Popover</a
+    >
+    <!-- Extended docs -->
+
+    <!-- How to? -->
 
     <!-- Other -->
     <a
@@ -1637,13 +1695,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/data/tables/"
-    >Bootstrap Tables</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/checkbox/index.html b/site/content/docs/standard/forms/checkbox/index.html
index f21ef8b6c..17ba54626 100644
--- a/site/content/docs/standard/forms/checkbox/index.html
+++ b/site/content/docs/standard/forms/checkbox/index.html
@@ -735,30 +735,57 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/multiselect/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/icons/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Bootstrap Multiselect</a
+      >icons</a
     >
-
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Bootstrap survey</a
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
     >
-
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/multiselect/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Multiselect</a
+      >utility first</a
     >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <!-- Extended docs -->
 
     <!-- Main docs -->
     <a
@@ -789,13 +816,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/checkbox/"
-    >Bootstrap Checkbox</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/datepicker/index.html b/site/content/docs/standard/forms/datepicker/index.html
index b0110d8a6..070c2b898 100644
--- a/site/content/docs/standard/forms/datepicker/index.html
+++ b/site/content/docs/standard/forms/datepicker/index.html
@@ -1600,14 +1600,60 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
     <!-- Extended docs -->
+
+    <!-- Main docs -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/"
+      href="https://tailwind-elements.com/docs/standard/forms/inputs/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Survey form</a
+      >Inputs</a
     >
+    <!-- Extended docs -->
 
     <!-- Main docs -->
     <a
@@ -1635,13 +1681,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/datepicker/"
-    >Bootstrap Datepicker</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/file-input/index.html b/site/content/docs/standard/forms/file-input/index.html
index 3f1c1b9b8..66dca2a7c 100644
--- a/site/content/docs/standard/forms/file-input/index.html
+++ b/site/content/docs/standard/forms/file-input/index.html
@@ -571,14 +571,50 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Survey form</a
+      >buttons</a
     >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <!-- Extended docs -->
 
     <!-- Main docs -->
     <a
@@ -592,13 +628,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/file/"
-    >Bootstrap File Input</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/input-group/index.html b/site/content/docs/standard/forms/input-group/index.html
index 46791a16f..7ec82c0e5 100644
--- a/site/content/docs/standard/forms/input-group/index.html
+++ b/site/content/docs/standard/forms/input-group/index.html
@@ -1855,58 +1855,56 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   </h2>
 
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/textarea/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/icons/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Textarea</a
+      >icons</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/login/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Login Form</a
+      >focus active and others</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/credit-card/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Credit Card</a
+      >dark mode</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/payment-forms/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Payment Forms</a
+      >spacing</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Survey</a
+      >utility first</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/registration/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Registration form</a
+      >buttons</a
     >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <!-- Extended docs -->
   </div>
 </section>
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/input-fields/"
-    >Bootstrap Inputs</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/inputs/index.html b/site/content/docs/standard/forms/inputs/index.html
index 2aefa09a4..d0b75941e 100644
--- a/site/content/docs/standard/forms/inputs/index.html
+++ b/site/content/docs/standard/forms/inputs/index.html
@@ -1341,58 +1341,42 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   </h2>
 
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/textarea/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
       type="button"
       data-te-ripple-init
-      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg peer-focus:text-primary dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400 dark:peer-focus:text-primary"
-      >Textarea</a
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/login/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
       type="button"
       data-te-ripple-init
-      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg peer-focus:text-primary dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400 dark:peer-focus:text-primary"
-      >Login Form</a
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/credit-card/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
       type="button"
       data-te-ripple-init
-      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg peer-focus:text-primary dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400 dark:peer-focus:text-primary"
-      >Credit Card</a
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/payment-forms/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
       type="button"
       data-te-ripple-init
-      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg peer-focus:text-primary dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400 dark:peer-focus:text-primary"
-      >Payment Forms</a
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
       type="button"
       data-te-ripple-init
-      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg peer-focus:text-primary dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400 dark:peer-focus:text-primary"
-      >Survey</a
-    >
-    <a
-      href="https://mdbootstrap.com/docs/standard/extended/registration/"
-      type="button"
-      data-te-ripple-init
-      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg peer-focus:text-primary dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400 dark:peer-focus:text-primary"
-      >Registration form</a
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
     >
+    <!-- Extended docs -->
   </div>
 </section>
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/input-fields/"
-    >Bootstrap Inputs</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/login-form/index.html b/site/content/docs/standard/forms/login-form/index.html
index 7ba4deef7..16454de68 100644
--- a/site/content/docs/standard/forms/login-form/index.html
+++ b/site/content/docs/standard/forms/login-form/index.html
@@ -1168,3 +1168,107 @@ <h4 class="mb-6 text-xl font-semibold">
   </section>
 </section>
 <!-- Section: v.3 -->
+
+<hr class="mb-5 dark:border-neutral-600" />
+
+<section id="section-related-resources">
+  <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
+    Related resources
+  </h2>
+
+  <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/grid-system/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >grid system</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/responsiveness/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >responsiveness</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/icons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >icons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/arbitrary-values/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >arbitrary values</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/flexbox/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >flexbox</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/text/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >text</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/shadows/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >shadows</a
+    >
+    <!-- Extended docs -->
+  </div>
+</section>
diff --git a/site/content/docs/standard/forms/radio/index.html b/site/content/docs/standard/forms/radio/index.html
index 2e0f7f262..7a04147a4 100644
--- a/site/content/docs/standard/forms/radio/index.html
+++ b/site/content/docs/standard/forms/radio/index.html
@@ -657,22 +657,50 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/multiselect/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Multiselect</a
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
     >
-
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Survey</a
+      >utility first</a
     >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/colbuttonsors/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <!-- Extended docs -->
 
     <!-- Main docs -->
     <a
@@ -702,13 +730,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/radio/"
-    >Bootstrap Radio Button</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/range/index.html b/site/content/docs/standard/forms/range/index.html
index a1561b987..b0e5b21a1 100644
--- a/site/content/docs/standard/forms/range/index.html
+++ b/site/content/docs/standard/forms/range/index.html
@@ -518,6 +518,35 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   </h2>
 
   <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
     <!-- Main docs -->
     <a
       href="https://tailwind-elements.com/docs/standard/components/progress/"
@@ -535,13 +564,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
     >
   </div>
 </section>
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/range/"
-    >Bootstrap Range</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/registration-form/index.html b/site/content/docs/standard/forms/registration-form/index.html
index 441728a54..8eca8c5b7 100644
--- a/site/content/docs/standard/forms/registration-form/index.html
+++ b/site/content/docs/standard/forms/registration-form/index.html
@@ -1135,3 +1135,107 @@ <h4 class="mb-6 text-xl font-semibold">
   </section>
 </section>
 <!-- Section: v.3 -->
+
+<hr class="mb-5 dark:border-neutral-600" />
+
+<section id="section-related-resources">
+  <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
+    Related resources
+  </h2>
+
+  <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/grid-system/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >grid system</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/responsiveness/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >responsiveness</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/icons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >icons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/arbitrary-values/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >arbitrary values</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/flexbox/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >flexbox</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/text/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >text</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/shadows/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >shadows</a
+    >
+    <!-- Extended docs -->
+  </div>
+</section>
diff --git a/site/content/docs/standard/forms/search/index.html b/site/content/docs/standard/forms/search/index.html
index abf23f781..1c66d457b 100644
--- a/site/content/docs/standard/forms/search/index.html
+++ b/site/content/docs/standard/forms/search/index.html
@@ -653,21 +653,64 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   </h2>
 
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/search-expanding/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/navbar/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Expanding Search Bar</a
+      >navbar</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/multiselect/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/icons/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Multiselect</a
+      >icons</a
     >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <!-- Extended docs -->
 
     <!-- Main docs -->
     <a
@@ -693,13 +736,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
     >
   </div>
 </section>
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/search/"
-    >Bootstrap Search</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/select/index.html b/site/content/docs/standard/forms/select/index.html
index e335e6bc6..76792b6d1 100644
--- a/site/content/docs/standard/forms/select/index.html
+++ b/site/content/docs/standard/forms/select/index.html
@@ -1847,12 +1847,34 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   </h2>
 
   <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/multiselect/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Multiselect</a
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
     >
 
     <!-- Main docs -->
@@ -1865,13 +1887,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
     >
   </div>
 </section>
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/select/"
-    >Bootstrap Select</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/switch/index.html b/site/content/docs/standard/forms/switch/index.html
index ae17504f4..4e03dd3a7 100644
--- a/site/content/docs/standard/forms/switch/index.html
+++ b/site/content/docs/standard/forms/switch/index.html
@@ -580,6 +580,42 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >cofocus active and otherslors</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
     <!-- Main docs -->
     <a
       href="https://tailwind-elements.com/docs/standard/forms/checkbox/"
@@ -608,13 +644,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/switch/"
-    >Bootstrap Switch</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/templates/index.html b/site/content/docs/standard/forms/templates/index.html
index 26d6be182..2c91e7d5b 100644
--- a/site/content/docs/standard/forms/templates/index.html
+++ b/site/content/docs/standard/forms/templates/index.html
@@ -1194,49 +1194,78 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
 
   <!-- Resources -->
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/icons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >icons</a
+    >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/textarea/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/icofocus-active-and-othersns/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Textarea</a
+      >focus active and others</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/login/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Login Form</a
+      >dark mode</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/credit-card/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/flexbox/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Credit Card</a
+      >flexbox</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/payment-forms/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/text/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Payment Forms</a
+      >text</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Survey</a
+      >spacing</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/registration/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Registration form</a
+      >utility first</a
     >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/shadows/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >shadows</a
+    >
+    <!-- Extended docs -->
     <a
       href="https://tailwind-elements.com/docs/standard/components/cards/"
       type="button"
@@ -1255,13 +1284,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   <!-- Resources -->
 </section>
 <!-- Section: Related resources -->
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/overview/"
-    >Bootstrap Forms</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/textarea/index.html b/site/content/docs/standard/forms/textarea/index.html
index 0a7d1ec30..32c0ac70e 100644
--- a/site/content/docs/standard/forms/textarea/index.html
+++ b/site/content/docs/standard/forms/textarea/index.html
@@ -358,38 +358,52 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   </h2>
 
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/textarea/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Bootstrap Textarea</a
+      >focus active and others</a
     >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/css-text-animations/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Text animation</a
+      >dark mode</a
     >
-
-    <!-- How to? -->
     <a
-      href="https://mdbootstrap.com/how-to/bootstrap/text-responsive/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/text/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >How to make text responsive in Bootstrap</a
+      >text</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
     >
-
     <a
-      href="https://mdbootstrap.com/how-to/bootstrap/text-center/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >How to center text in Bootstrap</a
+      >utility first</a
     >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <!-- Extended docs -->
+
+    <!-- How to? -->
 
     <!-- Main docs -->
     <a
@@ -401,13 +415,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
     >
   </div>
 </section>
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/extended/textarea/"
-    >Bootstrap Textarea</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/forms/timepicker/index.html b/site/content/docs/standard/forms/timepicker/index.html
index e27810d38..febf66d9d 100644
--- a/site/content/docs/standard/forms/timepicker/index.html
+++ b/site/content/docs/standard/forms/timepicker/index.html
@@ -2239,14 +2239,50 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
   </h2>
 
   <div class="justify-content-start w-100 my-5 text-start">
-    <!-- Extended docs -->
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/spacing/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >spacing</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/utility-first/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >utility first</a
+    >
     <a
-      href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/"
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
       type="button"
       data-te-ripple-init
       class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
-      >Survey form</a
+      >buttons</a
     >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/rounded-corners/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >rounded corners</a
+    >
+    <!-- Extended docs -->
 
     <!-- Main docs -->
     <a
@@ -2272,13 +2308,3 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
     >
   </div>
 </section>
-
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/forms/timepicker/"
-    >Bootstrap Timepicker</a
-  >
-  from MDBootstrap.
-</p>
diff --git a/site/content/docs/standard/methods/ripple/index.html b/site/content/docs/standard/methods/ripple/index.html
index 25cfadd84..898382869 100644
--- a/site/content/docs/standard/methods/ripple/index.html
+++ b/site/content/docs/standard/methods/ripple/index.html
@@ -1210,12 +1210,79 @@ <h3 class="mb-5 mt-0 text-3xl font-semibold leading-normal" id="colors3"></h3>
 
 <hr class="mb-5 dark:border-neutral-600" />
 
-<p>
-  If you are looking for more advanced options, try
-  <a
-    class="text-primary dark:text-primary-400"
-    href="https://mdbootstrap.com/docs/standard/methods/ripple/"
-    >Bootstrap Ripple</a
-  >
-  from MDBootstrap.
-</p>
+<!-- Section: Related resources -->
+<section id="section-related-resources">
+  <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
+    Related resources
+  </h2>
+
+  <!-- Resources -->
+  <div class="justify-content-start w-100 my-5 text-start">
+    <!-- Tutorials -->
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/colors/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >colors</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/focus-active-and-others/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >focus active and others</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/buttons/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >buttons</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/ripple-effect/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >ripple-effect</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/dark-mode/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >dark mode</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/fullscreen-background-image/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >fullscreen background image</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/masks/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >masks</a
+    >
+    <a
+      href="https://tailwind-elements.com/learn/te-foundations/tailwind-css/hsla-colors/"
+      type="button"
+      data-te-ripple-init
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      >hsla colors</a
+    >
+    <!-- Main docs -->
+
+    <!-- Extended docs -->
+
+    <!-- How to? -->
+
+    <!-- Other -->
+  </div>
+  <!-- Resources -->
+</section>
+<!-- Section: Related resources -->