First extended docs

site/content/docs/standard/extended/_index.html

@@ -31,21 +31,141 @@ <h1>Extended documentation</h1>
 
       <a
         href="/docs/standard/extended/example/"
-        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        class="-mt-[1px] block hidden border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
         data-page-list-item
         data-title="Example title"
         data-desc="Example description">
         <h5 class="my-1 text-lg font-bold">Example title</h5>
         <p class="mb-1">Example description</p>
       </a>
 
+      <a
+        href="/docs/standard/extended/center-text/"
+        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        data-page-list-item
+        data-title="Center text"
+        data-desc="Use responsive text center utilities with Tailwind elements. Learn how to center text easily.">
+        <h5 class="my-1 text-lg font-bold">Center text</h5>
+        <p class="mb-1">
+          Use responsive text center utilities with Tailwind elements. Learn how
+          to center text easily.
+        </p>
+      </a>
+
+      <a
+        href="/docs/standard/extended/float-right/"
+        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        data-page-list-item
+        data-title="Float right"
+        data-desc="Use responsive float utilities. See how to place an element to the right of its container.">
+        <h5 class="my-1 text-lg font-bold">Float right</h5>
+        <p class="mb-1">
+          Use responsive float utilities. See how to place an element to the
+          right of its container.
+        </p>
+      </a>
+
+      <a
+        href="/docs/standard/extended/opacity/"
+        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        data-page-list-item
+        data-title="Opacity"
+        data-desc="Use responsive Opacity utilities with Tailwind elements. See how to easily and simply change the opacity.">
+        <h5 class="my-1 text-lg font-bold">Opacity</h5>
+        <p class="mb-1">
+          Use responsive Opacity utilities with Tailwind elements. See how to
+          easily and simply change the opacity.
+        </p>
+      </a>
+
+      <a
+        href="/docs/standard/extended/sticky-footer/"
+        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        data-page-list-item
+        data-title="Sticky footer"
+        data-desc="A sticky footer is a component that is pinned to the bottom of the viewport in desktop browsers. It stays visible when the user scrolls the page up or down.">
+        <h5 class="my-1 text-lg font-bold">Sticky footer</h5>
+        <p class="mb-1">
+          A sticky footer is a component that is pinned to the bottom of the
+          viewport in desktop browsers. It stays visible when the user scrolls
+          the page up or down.
+        </p>
+      </a>
+
+      <a
+        href="/docs/standard/extended/sticky-header/"
+        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        data-page-list-item
+        data-title="Sticky header"
+        data-desc="A sticky navbar is a component that is pinned to the top of the viewport in desktop browsers. It stays visible when the user scrolls the page down or up">
+        <h5 class="my-1 text-lg font-bold">Sticky header</h5>
+        <p class="mb-1">
+          A sticky navbar is a component that is pinned to the top of the
+          viewport in desktop browsers. It stays visible when the user scrolls
+          the page down or up
+        </p>
+      </a>
+
+      <a
+        href="/docs/standard/extended/text-bold/"
+        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        data-page-list-item
+        data-title="Text bold"
+        data-desc="Use responsive text bold styles with Tailwind elements. This a simple example of how quickly you can change the font weight.">
+        <h5 class="my-1 text-lg font-bold">Text bold</h5>
+        <p class="mb-1">
+          Use responsive text bold styles with Tailwind elements. This a simple
+          example of how quickly you can change the font weight.
+        </p>
+      </a>
+
+      <a
+        href="/docs/standard/extended/text-color/"
+        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        data-page-list-item
+        data-title="Text color"
+        data-desc="Use responsive text color styles with Tailwind elements. See how to easily and simply change the text color.">
+        <h5 class="my-1 text-lg font-bold">Text color</h5>
+        <p class="mb-1">
+          Use responsive text color styles with Tailwind elements. See how to
+          easily and simply change the text color.
+        </p>
+      </a>
+
+      <a
+        href="/docs/standard/extended/text-size/"
+        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        data-page-list-item
+        data-title="Text size"
+        data-desc="Use responsive text size styles with Tailwind elements. Learn how to change the text size easily and quickly.">
+        <h5 class="my-1 text-lg font-bold">Text size</h5>
+        <p class="mb-1">
+          Use responsive text size styles with Tailwind elements. Learn how to
+          change the text size easily and quickly.
+        </p>
+      </a>
+
+      <a
+        href="/docs/standard/extended/visibility/"
+        class="-mt-[1px] block border py-2 px-6 transition-colors duration-500 hover:bg-gray-100 active:bg-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
+        data-page-list-item
+        data-title="Visibility"
+        data-desc="Use responsive Visibility utilities with Tailwind elements. Control the visibility, without modifying the display, of elements with visibility utilities.">
+        <h5 class="my-1 text-lg font-bold">Visibility</h5>
+        <p class="mb-1">
+          Use responsive Visibility utilities with Tailwind elements. Control
+          the visibility, without modifying the display, of elements with
+          visibility utilities.
+        </p>
+      </a>
+
       <hr class="my-10 dark:border-gray-600" />
     </div>
   </section>
   <!-- Extended docs -->
 
   <!-- How to docs -->
-  <section class="grid grid-cols-12">
+  <section class="grid hidden grid-cols-12">
     <div class="col-span-8">
       <h2 class="mb-4 text-[28px] font-bold">"How To" docs</h2>
       <div>

site/content/docs/standard/extended/center-text/index-ss.html

@@ -0,0 +1,9 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#basic-example">Basic example</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-related-resources">Related resources</a>
+</li>

site/content/docs/standard/extended/center-text/index.html

@@ -0,0 +1,118 @@
+---
+title: "Center text"
+date: 2023-03-017T10:00:00+02:00
+draft: false
+main_title: "Center text"
+subheading: "Tailwind CSS Center text"
+seo_title: "Tailwind CSS Center text - Free Examples & Tutorial"
+description: "Use responsive text center utilities with Tailwind elements. Learn how to center text easily."
+image: "img/components-big.jpg"
+video: "https://www.youtube.com/watch?v=-GmnyjgI4Jc&ab_channel=Keepcoding"
+url: "docs/standard/extended/center-text"
+custom_links: "Typography=https://tailwind-elements.com/docs/standard/content-styles/typography/"
+---
+
+<!--Section: Docs content-->
+<section>
+  <!--Section: Introduction-->
+  <section id="section-introduction">
+    <!-- Main title -->
+    <h2 class="mt-4 text-[40px] font-bold">{{< docs-title >}}</h2>
+
+    <!-- Seo title -->
+    <h1 class="mt-0 text-base font-medium">{{< docs-subheading >}}</h1>
+
+    <p class="my-4">{{< docs-description >}}</p>
+  </section>
+  <!--Section: Introduction-->
+
+  <hr class="my-10 dark:border-gray-600" />
+
+  <!--Section: Basic example-->
+  <section id="basic-example" class="pb-10">
+    <!--Subsection title-->
+    <h2 class="mb-4 text-[32px] font-medium" data-te-spy-item>Basic example</h2>
+
+    <!--Description-->
+    <p>To center the text, use the <code>.text-center</code> class.</p>
+
+    <!--Section: Demo-->
+    {{< twsnippet/demo id="example1" >}}
+    <div class="pt-3">
+      <p class="text-center">Centered text.</p>
+    </div>
+    {{< /twsnippet/demo >}}
+    <!--Section: Demo-->
+
+    <!--Section: Code-->
+    <section class="!visible hidden" data-te-collapse-item id="example1">
+      <div class="pt-4">
+        {{< twsnippet/wrapper "HTML" >}}
+        {{< twsnippet/code active=true lang="HTML" >}}
+        <p class="text-center">Centered text.</p>
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+      </div>
+    </section>
+    <!--Section: Code-->
+  </section>
+  <!--Section: Basic example-->
+
+  <hr class="mb-10 dark:border-gray-600" />
+
+  <!-- Section: Related resources -->
+  <section id="section-related-resources">
+    <h2 class="text-[32px] font-medium" data-te-spy-item>Related resources</h2>
+
+    <!--Chips with links-->
+    <div class="mt-5 mb-10 flex flex-wrap justify-start">
+      <!--Main-->
+
+      <a
+        href="https://tailwind-elements.com/docs/standard/content-styles/typography/"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 py-2.5 px-5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-xl hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] dark:bg-gray-700 dark:hover:bg-gray-600">
+        Typography</a
+      >
+
+      <a
+        href="https://tailwind-elements.com/docs/standard/forms/textarea/"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 py-2.5 px-5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-xl hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] dark:bg-gray-700 dark:hover:bg-gray-600">
+        Textarea</a
+      >
+
+      <a
+        href="https://tailwind-elements.com/docs/standard/forms/inputs/"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 py-2.5 px-5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-xl hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] dark:bg-gray-700 dark:hover:bg-gray-600">
+        Input Fields</a
+      >
+
+      <!--Extended docs-->
+
+      <a
+        href="https://tailwind-elements.com/docs/standard/extended/text-size"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 py-2.5 px-5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-xl hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] dark:bg-gray-700 dark:hover:bg-gray-600">
+        Text size</a
+      >
+
+      <a
+        href="https://tailwind-elements.com/docs/standard/extended/text-color"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 py-2.5 px-5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-xl hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] dark:bg-gray-700 dark:hover:bg-gray-600">
+        Text color</a
+      >
+
+      <a
+        href="https://tailwind-elements.com/docs/standard/extended/text-bold"
+        class="mb-2 mr-2 rounded-2xl bg-gray-200 py-2.5 px-5 text-[12px] font-medium capitalize transition-all hover:bg-white hover:bg-white hover:shadow-xl hover:shadow-[0_2px_5px_0_rgba(0,0,0,0.25)] dark:bg-gray-700 dark:hover:bg-gray-600">
+        Text bold</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.
+    </p>
+  </section>
+  <!-- Section: Related resources -->
+</section>
+<!--Section: Docs content-->

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

@@ -8,7 +8,7 @@
 description: "Use responsive {COMPONENT} component with helper examples for {KEYWORDS/SECTIONS} {Free download, open-source license.}"
 image: "img/components-big.jpg"
 video: "https://www.youtube.com/watch?v=-GmnyjgI4Jc&ab_channel=Keepcoding"
-url: "{URL}"
+url: "docs/standard/extended/example"
 custom_links: "CARDS=https://tailwind-elements.com/docs/standard/components/cards/"
 ---
 

site/content/docs/standard/extended/float-right/index-ss.html

@@ -0,0 +1,9 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#basic-example">Basic example</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-related-resources">Related resources</a>
+</li>