diff --git a/apps/web/examples/clipboard/clipboard.withIcon.tsx b/apps/web/examples/clipboard/clipboard.withIcon.tsx
index f34c0d97b..4e7c51d10 100644
--- a/apps/web/examples/clipboard/clipboard.withIcon.tsx
+++ b/apps/web/examples/clipboard/clipboard.withIcon.tsx
@@ -10,17 +10,21 @@ import { Clipboard } from "flowbite-react"
 
 export function Component() {
   return (
-    <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
+    <div className="grid w-full max-w-64">
+      <div className="relative">
         <label htmlFor="npm-install" className="sr-only">
-            Label
+          Label
         </label>
-        <input id="npm-install" type="text"
-            className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-            value="npm install flowbite-react"
-            disabled
-            readOnly
-            />
-         <Clipboard.WithIcon valueToCopy="npm install flowbite-react" />
+        <input
+          id="npm-install"
+          type="text"
+          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          value="npm install flowbite-react"
+          disabled
+          readOnly
+        />
+        <Clipboard.WithIcon valueToCopy="npm install flowbite-react" />
+      </div>
     </div>
   )
 }
@@ -28,19 +32,21 @@ export function Component() {
 
 export function Component() {
   return (
-    <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
-      <label htmlFor="npm-install" className="sr-only">
-        Label
-      </label>
-      <input
-        id="npm-install"
-        type="text"
-        className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-        value="npm install flowbite-react"
-        disabled
-        readOnly
-      />
-      <Clipboard.WithIcon valueToCopy="npm install flowbite-react" />
+    <div className="grid w-full max-w-64">
+      <div className="relative">
+        <label htmlFor="npm-install" className="sr-only">
+          Label
+        </label>
+        <input
+          id="npm-install"
+          type="text"
+          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          value="npm install flowbite-react"
+          disabled
+          readOnly
+        />
+        <Clipboard.WithIcon valueToCopy="npm install flowbite-react" />
+      </div>
     </div>
   );
 }
diff --git a/apps/web/examples/clipboard/clipboard.withIconText.tsx b/apps/web/examples/clipboard/clipboard.withIconText.tsx
index 6e740b2f2..e8640398c 100644
--- a/apps/web/examples/clipboard/clipboard.withIconText.tsx
+++ b/apps/web/examples/clipboard/clipboard.withIconText.tsx
@@ -10,17 +10,21 @@ import { Clipboard } from "flowbite-react"
 
 export function Component() {
   return (
-    <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
+    <div className="grid w-full max-w-80">
+      <div className="relative">
         <label htmlFor="npm-install" className="sr-only">
-            Label
+          Label
         </label>
-        <input id="npm-install" type="text"
-            className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-            value="npm install flowbite-react"
-            disabled
-            readOnly
-            />
-         <Clipboard.WithIconText valueToCopy="npm install flowbite-react" />
+        <input
+          id="npm-install"
+          type="text"
+          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-4 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          value="npm install flowbite-react"
+          disabled
+          readOnly
+        />
+        <Clipboard.WithIconText valueToCopy="npm install flowbite-react" />
+      </div>
     </div>
   )
 }
@@ -28,19 +32,21 @@ export function Component() {
 
 export function Component() {
   return (
-    <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
-      <label htmlFor="npm-install" className="sr-only">
-        Label
-      </label>
-      <input
-        id="npm-install"
-        type="text"
-        className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-        value="npm install flowbite-react"
-        disabled
-        readOnly
-      />
-      <Clipboard.WithIconText valueToCopy="npm install flowbite-react" />
+    <div className="grid w-full max-w-80">
+      <div className="relative">
+        <label htmlFor="npm-install" className="sr-only">
+          Label
+        </label>
+        <input
+          id="npm-install"
+          type="text"
+          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-4 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          value="npm install flowbite-react"
+          disabled
+          readOnly
+        />
+        <Clipboard.WithIconText valueToCopy="npm install flowbite-react" />
+      </div>
     </div>
   );
 }