spoko-design-system 0.0.1 → 0.0.5

package/src/pages/components/icons.astro

@@ -1,45 +1,54 @@
----
-import MainLayout from '../../layouts/MainLayout.astro';
-import { Icon } from 'astro-icon/components';
-
-const ICONS = {
-        mdi: ["facebook", "instagram", "post-it-note-edit-outline"], // Loads only Material Design Icon's "account" SVG
-        'ant-design': ["menu-fold-outlined", "menu-unfold-outlined", "menu-outlined" ],
-        bi: ["envelope-open", "credit-card"],
-        bx: ["arrow-back"],
-        carbon: ["language", "checkmark", "home", "dicom-overlay"],
-        el: ["star-empty", "star"],
-        'eos-icons': ["three-dots-loading"],
-        fluent: ["share-android-24-regular"],
-        'fluent-emoji': ["cookie"],
-        la: ["arrow-right", "arrow-left"],
-        octicon: ["chevron-left-24", "x-24"],
-        uil: ["map-marker", "envelope", "phone"]
-}
-
----
-
-<MainLayout>
-    <h1>Icons</h1>
-        <pre  class="astro-code bg-slate-800 text-white">import &#123; Icon &#125; from 'astro-icon/components';</pre>
-        <div class="">
-        {Object.keys(ICONS).map((key) => (
-                <h2>{key}</h2>
-                <div class="inline-grid grid-cols-4 gap-0 w-full">
-                        {ICONS[key].map((value) => (
-                                <div>
-                                <div class="component-preview ">
-<Icon name={`${key}:${value}`} />
-                                </div>
-                                <pre class="astro-code bg-slate-800 text-white text-sm">&lt;Icon name={`${key}:${value}`} /&gt;</pre>
-                                </div>
-                        ))}
-                </div>
-        ))}
-        </div>
-
-
-
-</MainLayout>
-
-
+---
+import { changeLanguage } from "i18next";
+import MainLayout from "../../layouts/MainLayout.astro";
+import { Icon } from "astro-icon/components";
+
+
+const iconifyUrl = "https://icon-sets.iconify.design/";
+const ICONS = {
+    mdi: ["facebook", "instagram", "post-it-note-edit-outline", "car-hatchback", "car-door", "car-side", "car-windshield-outline", "car-light-alert", "car-tire-alert", "car-light-dimmed", "car-light-fog", "car-light-high", "car-parking-lights", "car-esp", "car-brake-abs", "car-horn", "engine-outline", "fan", "fan-off", "air-conditioner", "coolant-temperature", "car-brake-alert", "car-traction-control", "card-text-outline", "fuel", "oil", "hazard-lights", "credit-card-outline"],
+    el: ["star-empty", "star",  "heart-empty",  "heart", "map-marker", "fire", "quote-right", "qrcode", "car", "indent-left", "indent-right", "ok"],    'eos-icons': ["three-dots-loading", "bubble-loading", "loading", "installing"],
+    fluent: ["share-android-24-regular", "checkmark-24-filled", "tag-24-regular", "tag-multiple-24-regular" ],
+    "fluent-emoji": ["cookie", "construction", "warning", "wrench"],
+    la: ["arrow-right", "arrow-left", "car", "car-side"],
+    octicon: ["chevron-left-24", "x-24", "alert-24", "graph-24", "comment-24", "comment-discussion-24", "clock-24", "star-24", "star-fill-24", "file-media-24", "heart-24", "heart-fill-24", "project-roadmap-24", "location-24", "info-24", "mark-github-16"],
+    uil: ["map-marker", "envelope", "phone", "tag-alt"],
+    "simple-icons": ["ebay", "allegro", "volkswagen", "audi", "skoda", "seat", "whatsapp", "x", "facebook", "messenger", "instagram", "telegram"],
+    "icon-park-outline": ["shopping-bag", "comment", "comments", "tag-one"],
+    flowbite: ["arrow-left-outline", "arrow-right-outline", "angle-left-outline", "angle-right-outline", "chevron-left-outline", "chevron-right-outline","map-location-outline", "map-pin-alt-solid", "x-outline", "messages-outline", "arrow-down-to-bracket-outline", "check-outline"]
+
+};
+---
+
+<MainLayout>
+    <h1>Icons</h1>
+    <p>Astro Icon is a straightforward icon system for the Astro framework.</p>
+
+    <a href="https://www.astroicon.dev/">https://www.astroicon.dev/</a>
+
+        <pre  class="mt-6 astro-code bg-slate-800 text-white">import &#123; Icon &#125; from 'astro-icon/components';</pre>
+        <div class="">
+        {Object.keys(ICONS).map((key) => (
+            <h2 class="mt-6 mx-2">
+                <a href={`${iconifyUrl}${key}/`} target="_blank">
+                    {key}
+                </a>
+            </h2>
+            <div class="inline-grid grid-cols-2 md:grid-cols-4 gap-0 w-full">
+                    {ICONS[key].map((value) => (
+                            <div class="mx-1 mb-2">
+                            <div class="component-preview ">
+    <Icon name={`${key}:${value}`} class="text-3xl mx-auto" />
+                            </div>
+                            <pre class="astro-code bg-slate-800 text-white text-sm text-center">&lt;Icon name={`"${key}:${value}"`} /&gt;</pre>
+                            </div>
+                    ))}
+            </div>
+        ))}
+        </div>
+
+
+
+</MainLayout>
+
+

package/src/pages/components/image.mdx

@@ -0,0 +1,502 @@
+---
+title: "Jumbatron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Image from '../../components/Image.astro'
+
+## Image
+
+Image converted to AVIF format and resized.
+AVIF compresses images significantly better than older-generation formats such as WebP and JPEG.
+
+#
+Displaying great product images is one of the most important keys to e-Commerce success.
+
+
+
+- https://en.wikipedia.org/wiki/AVIF
+
+#
+
+You can choose the image format you need so that you do not unnecessarily load an image that is larger than the area in which you are displaying it. This ensures maximum page optimisation.
+
+- https://docs.astro.build/en/guides/images/
+
+#
+
+Use `.img--overlay` class for images on white background to make a layer with light grey overlay.
+
+
+### Small Image
+`.img--small`
+
+<div class="component-preview">
+  <div class="img--overlay img--4/3 img--small">
+  <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+
+    <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+      <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+</div>
+
+
+
+
+```js
+<div class="img--overlay img--4/3 img--small">
+  <Image
+    imageObject={
+      {
+        src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+        alt: 'Image Alt',
+        height: '180',
+        width: '240',
+        class: 'object-cover'
+      }
+    }
+  />
+
+  <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+  <div class="img--4/3 img--small">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'object-cover'
+        }
+      }
+    />
+  </div>
+
+  
+
+</div>
+```
+
+
+### Medium Image
+`.img--medium`
+
+<div class="component-preview">
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+</div>
+
+```ts
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+
+  <a class="img--medium img--3/2 b-l b-white" href="#">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/lake-mountains_1204-508.jpg?w=970&t=st=1706315236',
+          alt: 'Image Alt',
+          height: '180',
+          width: '240',
+          class: 'bg-gray-100/70'
+        }
+      }
+    />
+  </a>
+```
+
+### Responsive Image with srcset
+- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes
+
+<div class="component-preview">
+  <div class="h-full img--3/2 overflow-hidden">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=1970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '1350',
+          width: '1800',
+          class: 'bg-gray-100/70',
+          srcset: [430, 690, 960, 1200, 1800]
+        }
+      }
+    />
+  </div>
+</div>
+
+```js
+ <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=1970&t=st=1706315168',
+          alt: 'Image Alt',
+          height: '1350',
+          width: '1800',
+          class: 'bg-gray-100/70',
+          srcset: [430, 690, 960, 1200, 1800]
+        }
+      }
+    />
+```
+
+
+
+### Image Aspect Ratios
+
+Image ratio, also known as aspect ratio, is how wide an image is in relation to how tall it is. 
+For viewing on a mobile device, the recommended image ratio is 1:1 (a square picture). 
+
+<div class="component-preview">
+   <div class="columns-2 lg:columns-4 w-full">
+      <div class="text-center mb-4">
+         <div class="img--medium img--1/1 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">1:1</div>
+         </div>
+      </div>
+
+      <div class="text-center mb-4">
+         <div class="img--medium img--3/1 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:1</div>
+         </div>
+      </div>
+
+      <div class="text-center mb-4">
+         <div class="img--medium img--4/3 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">4:3</div>
+         </div>
+      </div>
+      <div class="text-center mb-4">
+         <div class="img--medium img--3/2 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:2</div>
+         </div>
+      </div>
+
+      <div class="text-center mb-4">
+         <div class="img--medium img--16/9 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">16:9</div>
+         </div>
+      </div>
+      <div class="text-center mb-4">
+         <div class="img--medium img--3/4 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">3:4</div>
+         </div>
+      </div>
+      <div class="text-center mb-4">
+         <div class="img--medium img--2/3 b-l b-white w-full">
+            <Image
+            imageObject={
+            {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+            }
+            }
+            />
+            <div class="absolute bottom-0 bg-black/40 text-white px-5 py-0 left-0 right-0">2:3</div>
+         </div>
+      </div>
+   </div>
+</div>
+
+
+```js
+  <div class="img--medium img--1/1 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--3/1 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--4/3 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--3/2 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--16/9 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '300',
+          width: '300',
+        }
+      }
+    />
+  </div>
+
+  <div class="img--medium img--3/4 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+  
+  <div class="img--medium img--2/3 b-l b-white w-full">
+    <Image
+      imageObject={
+        {
+          src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+          alt: 'Image Alt',
+          height: '700',
+          width: '700',
+        }
+      }
+    />
+  </div>
+
+```
+
+
+It is good to have all the images in the same ratio so that they look fairly uniform. Additionally, you can use a different ratio on desktop than on mobile view.
+
+### Image 1:1 on mobile, and 4:3 on desktop
+
+<div class="component-preview">
+  <div class="columns-1 md:columns-3">
+    <div class="img--medium img--1/1 md:img--4/3 b-l b-white w-full">
+      <Image
+        imageObject={
+          {
+            src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+            alt: 'Image Alt',
+            height: '700',
+            width: '700',
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+```js
+<div class="img--medium img--1/1 md:img--4/3 b-l b-white w-full">
+  <Image
+    imageObject={
+      {
+        src: 'https://img.freepik.com/free-photo/nature-beauty-tropical-rainforest-adventure-tranquility-freshness-generated-by-artificial-intellingence_25030-62539.jpg?size=960&ext=jpg',
+        alt: 'Image Alt',
+        height: '700',
+        width: '700',
+      }
+    }
+  />
+</div>
+```

package/src/pages/components/input.mdx

@@ -1,15 +1,46 @@
----
-title: Input
-layout: ../../layouts/MainLayout.astro
----
-import MainInput from '../../components/MainInput.vue'
-
-## Input text
-
-<div class="component-preview">
-    <MainInput label="Name"></MainInput>
-</div>
-
-```js
-<MainInput type="text" value="Hello world!"></MainInput>
+---
+title: Input
+layout: ../../layouts/MainLayout.astro
+---
+import MainInput from '../../components/MainInput.vue'
+
+## Input text
+
+<div class="component-preview">
+    <MainInput label="Name"></MainInput>
+</div>
+
+```js
+<MainInput type="text" value="Hello world!"></MainInput>
+```
+
+
+
+<div class="component-preview">
+
+<div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
+    <div class="relative">
+        <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+        <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+    </div>
+
+    <div class="relative z-0">
+        <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+        <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+    </div>
+</div>
+
+</div>
+
+
+```js
+<div class="relative">
+    <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+    <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+</div>
+
+<div class="relative z-0">
+    <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+    <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+</div>
 ```