add 5th pack of extended docs

site/content/docs/standard/extended/2-columns-layout/index.html

@@ -41,7 +41,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
 
     <!--Section: Demo-->
     {{< twsnippet/demo id="example1" >}}
-    <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+    <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
       <div class="grid grid-cols-2 gap-8">
         <div
           class="flex h-12 w-full items-center justify-center bg-info text-white dark:bg-primary">
@@ -155,9 +155,14 @@ <h2 class="text-[32px] font-medium" data-te-spy-item>Related resources</h2>
     </div>
 
     <p>
-      If you want to learn more about using forms, check out
-      <a href="#" class="text-blue-600 dark:text-blue-400">Forms </a>
-      documentation.
+      If you are looking for more advanced options, try
+      <a
+        class="text-primary"
+        href="https://mdbootstrap.com/docs/standard/layout/grid/"
+        target="_blank"
+        >grid system</a
+      >
+      from MDBootstrap.
     </p>
   </section>
   <!-- Section: Related resources -->

site/content/docs/standard/extended/background-image/index.html

@@ -46,7 +46,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
 
     <!--Section: Demo-->
     {{< twsnippet/demo id="example1" >}}
-    <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+    <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
       <div
         class="bg-cover"
         style="background-image: url('https://tecdn.b-cdn.net/img/new/slides/041.webp'); height: 400px"></div>
@@ -92,7 +92,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Jumbotron</h2>
 
     <!--Section: Demo-->
     {{< twsnippet/demo id="example2" >}}
-    <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+    <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
       <!-- Jumbotron -->
       <div
         class="relative overflow-hidden rounded-lg bg-cover bg-no-repeat p-12 text-center"
@@ -180,7 +180,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>
 
     <!--Section: Demo-->
     {{< twsnippet/demo id="example3" >}}
-    <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+    <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
       <div class="flex justify-center">
         <div
           class="mr-8 block max-w-sm rounded-lg bg-white bg-cover p-6 shadow-lg dark:bg-neutral-700"
@@ -355,9 +355,14 @@ <h2 class="text-[32px] font-medium" data-te-spy-item>Related resources</h2>
     </div>
 
     <p>
-      If you want to learn more about using forms, check out
-      <a href="#" class="text-blue-600 dark:text-blue-400">Forms </a>
-      documentation.
+      If you are looking for more advanced options, try
+      <a
+        class="text-primary"
+        href="https://mdbootstrap.com/docs/standard/content-styles/background-image/"
+        target="_blank"
+        >background Image</a
+      >
+      from MDBootstrap.
     </p>
   </section>
   <!-- Section: Related resources -->

site/content/docs/standard/extended/background-position/index.html

@@ -41,7 +41,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
 
     <!--Section: Demo-->
     {{< twsnippet/demo id="example1" >}}
-    <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+    <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
       <div
         class="flex snap-x scroll-p-4 items-end overflow-y-hidden overflow-x-scroll pt-10 sm:grid sm:grid-cols-3 sm:gap-16 sm:overflow-hidden">
         <div class="relative w-32 shrink-0 snap-start snap-always sm:w-auto">
@@ -53,7 +53,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
               class="relative z-10 h-full w-full rounded-md bg-left-top shadow-lg ring-1 ring-inset ring-black/10"
               style="background-image:url(https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp); background-size: 128px 128px"></div>
             <img
-              class="absolute top-0 left-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              class="absolute left-0 top-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
               src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp" />
           </div>
         </div>
@@ -66,7 +66,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
               class="relative z-10 h-full w-full rounded-md bg-top shadow-lg ring-1 ring-inset ring-black/10"
               style="background-image:url(https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp); background-size: 128px 128px"></div>
             <img
-              class="absolute top-0 -left-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              class="absolute -left-6 top-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
               src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp" />
           </div>
         </div>
@@ -79,7 +79,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
               class="relative z-10 h-full w-full rounded-md bg-right-top shadow-lg ring-1 ring-inset ring-black/10"
               style="background-image:url(https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp); background-size: 128px 128px"></div>
             <img
-              class="absolute top-0 right-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              class="absolute right-0 top-0 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
               src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp" />
           </div>
         </div>
@@ -105,7 +105,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
               class="relative z-10 h-full w-full rounded-md bg-center shadow-lg ring-1 ring-inset ring-black/10"
               style="background-image:url(https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp); background-size: 128px 128px"></div>
             <img
-              class="absolute -top-6 -left-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              class="absolute -left-6 -top-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
               src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp" />
           </div>
         </div>
@@ -144,7 +144,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
               class="relative z-10 h-full w-full rounded-md bg-bottom shadow-lg ring-1 ring-inset ring-black/10"
               style="background-image:url(https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp); background-size: 128px 128px"></div>
             <img
-              class="absolute -top-12 -left-6 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
+              class="absolute -left-6 -top-12 h-32 w-32 max-w-none overflow-hidden rounded-md opacity-0 sm:group-hover:opacity-25"
               src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp" />
           </div>
         </div>
@@ -292,9 +292,14 @@ <h2 class="text-[32px] font-medium" data-te-spy-item>Related resources</h2>
     </div>
 
     <p>
-      If you want to learn more about using forms, check out
-      <a href="#" class="text-blue-600 dark:text-blue-400">Forms </a>
-      documentation.
+      If you are looking for more advanced options, try
+      <a
+        class="text-primary"
+        href="https://mdbootstrap.com/docs/standard/content-styles/background-image/"
+        target="_blank"
+        >background Image</a
+      >
+      from MDBootstrap.
     </p>
   </section>
   <!-- Section: Related resources -->

site/content/docs/standard/extended/border-opacity/index.html

@@ -5,7 +5,7 @@
 main_title: "Border opacity"
 subheading: "Tailwind CSS Border opacity"
 seo_title: "Tailwind CSS Border opacity - Free Examples & Tutorial"
-description: "Use responsive border opacity component with Tailwind Elements. Quick and easy way to controlling the opacity of an element's border color."
+description: "Use responsive border opacity component with Tailwind Elements. Quick and easy way to control the opacity of an element's border color."
 image: "https://tecdn.b-cdn.net/img/components-big.jpg"
 video: "https://www.youtube.com/watch?v=-GmnyjgI4Jc&ab_channel=Keepcoding"
 url: "docs/standard/extended/border-opacity"
@@ -46,7 +46,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
 
     <!--Section: Demo-->
     {{< twsnippet/demo id="example1" >}}
-    <div class="-mx-4 -mt-4 -mb-8 rounded-t p-4">
+    <div class="-mx-4 -mb-8 -mt-4 rounded-t p-4">
       <div
         class="mb-4 flex flex-col items-center justify-center sm:flex-row md:mb-0">
         <div
@@ -113,6 +113,12 @@ <h2 class="text-[32px] font-medium" data-te-spy-item>Related resources</h2>
         Visibility</a
       >
 
+      <a
+        href="https://tailwind-elements.com/docs/standard/extended/visibility-hidden/"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 px-5 py-2.5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] hover:shadow-xl dark:bg-gray-700 dark:hover:bg-gray-600">
+        Visibility hidden</a
+      >
+
       <a
         href="https://tailwind-elements.com/docs/standard/extended/colors/"
         class="mb-2 mr-2 rounded-2xl bg-gray-200 px-5 py-2.5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] hover:shadow-xl dark:bg-gray-700 dark:hover:bg-gray-600">
@@ -124,12 +130,23 @@ <h2 class="text-[32px] font-medium" data-te-spy-item>Related resources</h2>
         class="mb-2 mr-2 rounded-2xl bg-gray-200 px-5 py-2.5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] hover:shadow-xl dark:bg-gray-700 dark:hover:bg-gray-600">
         Borders</a
       >
+
+      <a
+        href="https://tailwind-elements.com/docs/standard/extended/box-sizing/"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 px-5 py-2.5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] hover:shadow-xl dark:bg-gray-700 dark:hover:bg-gray-600">
+        Box sizing</a
+      >
     </div>
 
     <p>
-      If you want to learn more about using forms, check out
-      <a href="#" class="text-blue-600 dark:text-blue-400">Forms </a>
-      documentation.
+      If you are looking for more advanced options, try
+      <a
+        class="text-primary"
+        href="https://mdbootstrap.com/docs/standard/utilities/borders/"
+        target="_blank"
+        >borders</a
+      >
+      from MDBootstrap.
     </p>
   </section>
   <!-- Section: Related resources -->

site/content/docs/standard/extended/borders/index.html

@@ -51,7 +51,7 @@ <h4 class="mb-4 text-[24px] font-medium" data-te-spy-item>Additive</h4>
 
       <!--Section: Demo-->
       {{< twsnippet/demo id="example1" >}}
-      <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+      <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
         <div class="text-center">
           <span
             class="m-4 inline-block h-24 w-24 border-4 border-info bg-info-300 dark:border-primary dark:bg-primary-800"></span>
@@ -96,7 +96,7 @@ <h4 class="mb-4 text-[24px] font-medium" data-te-spy-item>Subtractive</h4>
 
       <!--Section: Demo-->
       {{< twsnippet/demo id="example2" >}}
-      <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+      <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
         <div class="text-center">
           <span
             class="m-4 inline-block h-24 w-24 border-0 border-info bg-info-300 dark:border-primary dark:bg-primary-800"></span>
@@ -153,7 +153,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Color</h2>
 
     <!--Section: Demo-->
     {{< twsnippet/demo id="example3" >}}
-    <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+    <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
       <div class="text-center">
         <span
           class="m-4 inline-block h-24 w-24 border-4 border-primary bg-primary-300"></span>
@@ -207,7 +207,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Border width</h2>
 
     <!--Section: Demo-->
     {{< twsnippet/demo id="example4" >}}
-    <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+    <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
       <div class="text-center">
         <span
           class="m-4 inline-block h-24 w-24 border-0 border-info bg-info-300 dark:border-primary dark:bg-primary-800"></span>
@@ -254,7 +254,7 @@ <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Border radius</h2>
 
     <!--Section: Demo-->
     {{< twsnippet/demo id="example5" >}}
-    <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+    <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
       <div class="text-center">
         <span
           class="m-4 inline-block h-24 w-24 rounded-xl bg-info dark:bg-primary"></span>
@@ -316,7 +316,7 @@ <h4 class="mb-4 text-[24px] font-medium" data-te-spy-item>Sizes</h4>
 
       <!--Section: Demo-->
       {{< twsnippet/demo id="example6" >}}
-      <div class="-mx-4 -mt-4 -mb-8 rounded-t p-8">
+      <div class="-mx-4 -mb-8 -mt-4 rounded-t p-8">
         <div class="text-center">
           <span
             class="m-4 inline-block h-24 w-24 rounded-none bg-info dark:bg-primary"></span>
@@ -386,6 +386,12 @@ <h2 class="text-[32px] font-medium" data-te-spy-item>Related resources</h2>
         Visibility</a
       >
 
+      <a
+        href="https://tailwind-elements.com/docs/standard/extended/visibility-hidden/"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 px-5 py-2.5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] hover:shadow-xl dark:bg-gray-700 dark:hover:bg-gray-600">
+        Visibility hidden</a
+      >
+
       <a
         href="https://tailwind-elements.com/docs/standard/extended/colors/"
         class="mb-2 mr-2 rounded-2xl bg-gray-200 px-5 py-2.5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] hover:shadow-xl dark:bg-gray-700 dark:hover:bg-gray-600">
@@ -397,12 +403,29 @@ <h2 class="text-[32px] font-medium" data-te-spy-item>Related resources</h2>
         class="mb-2 mr-2 rounded-2xl bg-gray-200 px-5 py-2.5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] hover:shadow-xl dark:bg-gray-700 dark:hover:bg-gray-600">
         Border opacity</a
       >
+
+      <a
+        href="https://tailwind-elements.com/docs/standard/extended/box-sizing/"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 px-5 py-2.5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] hover:shadow-xl dark:bg-gray-700 dark:hover:bg-gray-600">
+        Box sizing</a
+      >
+
+      <a
+        href="https://tailwind-elements.com/docs/standard/extended/spacing/"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 px-5 py-2.5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] hover:shadow-xl dark:bg-gray-700 dark:hover:bg-gray-600">
+        Spacing</a
+      >
     </div>
 
     <p>
-      If you want to learn more about using forms, check out
-      <a href="#" class="text-blue-600 dark:text-blue-400">Forms </a>
-      documentation.
+      If you are looking for more advanced options, try
+      <a
+        class="text-primary"
+        href="https://mdbootstrap.com/docs/standard/utilities/borders/"
+        target="_blank"
+        >borders</a
+      >
+      from MDBootstrap.
     </p>
   </section>
   <!-- Section: Related resources -->