diff --git a/playground/bun.lockb b/playground/bun.lockb
new file mode 100755
index 0000000..d439293
Binary files /dev/null and b/playground/bun.lockb differ
diff --git a/playground/src/components/MyComponent.vue b/playground/src/components/MyComponent.vue
index d8c7720..bbcd713 100644
--- a/playground/src/components/MyComponent.vue
+++ b/playground/src/components/MyComponent.vue
@@ -19,50 +19,53 @@ const watermarkOptions = ref({
 </script>
 
 <template>
-  <div class="flex h-full w-full">
-    <div>
-      <Watermark :options="watermarkOptions">
-        <div class="content">This is the content of the slot.</div>
+  <main class="flex flex-col lg:flex-row flex-1 items-stretch">
+    <section class="flex flex-2 lg:flex-1 bg-watermarkify-500">
+      <Watermark :options="watermarkOptions" class="watermark flex flex-1">
+        <div class="p-4 h-full">This is the content of the slot.</div>
       </Watermark>
-    </div>
-    <div class="w-full h-full">
-      <section class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <div class="mb-4">
-          <label class="block text-gray-700 font-bold mb-2" for="content"> Content </label>
+    </section>
+
+    <section class="flex-1 flex items-stretch">
+      <div
+        class="w-full grid lg:grid-flow-col lg:grid-rows-7 grid-cols-2 gap-x-5 lg:gap-x-10 p-5 lg:p-10 shadow-md bg-white text-xs lg:text-base text-gray-700 font-bold"
+      >
+        <div>
+          <label for="content" class="block mb-1 lg:mb-2">Content</label>
           <input
-            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="content"
             type="text"
             placeholder="Enter watermark content"
             v-model="watermarkOptions.content"
           />
         </div>
-        <div class="mb-4">
-          <label class="block text-gray-700 font-bold mb-2" for="width"> Width </label>
+        <div>
+          <label for="width" class="block mb-1 lg:mb-2">Width</label>
           <input
-            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="width"
             type="number"
             placeholder="Enter width"
             v-model="watermarkOptions.width"
           />
         </div>
-        <div class="mb-4">
-          <label class="block text-gray-700 font-bold mb-2" for="height"> Height </label>
+        <div>
+          <label for="height" class="block mb-1 lg:mb-2">Height</label>
           <input
-            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="height"
             type="number"
             placeholder="Enter height"
             v-model="watermarkOptions.height"
           />
         </div>
-        <div class="mb-4 md:flex md:justify-between">
+        <div class="md:justify-between">
           <div class="mb-4 md:mb-0">
-            <label class="block text-gray-700 font-bold mb-2" for="gap"> [GapX, GapY] </label>
+            <label for="gap" class="block mb-1 lg:mb-2"> [GapX GapY] </label>
             <div class="flex">
               <input
-                class="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 id="gap_x"
                 type="number"
                 placeholder="Enter Gap X"
@@ -70,7 +73,7 @@ const watermarkOptions = ref({
               />
               <span class="mx-2 flex items-center"></span>
               <input
-                class="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 id="gap_y"
                 type="number"
                 placeholder="Enter Gap Y"
@@ -79,12 +82,12 @@ const watermarkOptions = ref({
             </div>
           </div>
         </div>
-        <div class="mb-4">
+        <div>
           <div class="mb-4 md:mb-0">
-            <label class="block text-gray-700 font-bold mb-2" for="offset"> [OffsetX, OffsetY] </label>
+            <label for="offset" class="block mb-1 lg:mb-2"> [OffsetX OffsetY] </label>
             <div class="flex">
               <input
-                class="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 id="offset_x"
                 type="number"
                 placeholder="Enter offset X"
@@ -92,7 +95,7 @@ const watermarkOptions = ref({
               />
               <span class="mx-2 flex items-center"></span>
               <input
-                class="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 id="offset_y"
                 type="number"
                 placeholder="Enter offset Y"
@@ -101,20 +104,20 @@ const watermarkOptions = ref({
             </div>
           </div>
         </div>
-        <div class="mb-4">
-          <label class="block text-gray-700 font-bold mb-2" for="zIndex"> zIndex </label>
+        <div>
+          <label for="zIndex" class="block mb-1 lg:mb-2">zIndex</label>
           <input
-            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="zIndex"
             type="number"
             placeholder="Enter zIndex"
             v-model="watermarkOptions.zIndex"
           />
         </div>
-        <div class="mb-4">
-          <label class="block text-gray-700 font-bold mb-2" for="rotate"> rotate </label>
+        <div>
+          <label for="rotate" class="block mb-1 lg:mb-2">rotate</label>
           <input
-            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="rotate"
             type="number"
             min="-180"
@@ -123,74 +126,66 @@ const watermarkOptions = ref({
             v-model="watermarkOptions.rotate"
           />
         </div>
-      </section>
-    </div>
-    <div class="w-full h-full">
-      <section class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <div class="mb-4">
-          <div class="mb-4">
-            <label for="color" class="block text-gray-700 font-bold mb-2">fontColor</label>
-            <input
-              type="text"
-              id="color"
-              name="color"
-              class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-              placeholder="Enter a color value"
-              v-model="watermarkOptions.font.color"
-            />
-          </div>
-          <div class="mb-4">
-            <label for="size" class="block text-gray-700 font-bold mb-2">fontSize</label>
-            <input
-              type="number"
-              id="size"
-              name="size"
-              class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-              placeholder="Enter a font size"
-              v-model="watermarkOptions.font.fontSize"
-            />
-          </div>
-          <div class="mb-4">
-            <label for="weight" class="block text-gray-700 font-bold mb-2">fontWeight</label>
-            <input
-              id="weight"
-              name="weight"
-              class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-              placeholder="Enter a font weight"
-              v-model="watermarkOptions.font.fontWeight"
-            />
-          </div>
-          <div class="mb-4">
-            <label for="style" class="block text-gray-700 font-bold mb-2">fontStyle</label>
-            <input
-              id="style"
-              name="style"
-              class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-              placeholder="Enter a font style"
-              v-model="watermarkOptions.font.fontStyle"
-            />
-          </div>
-          <div class="mb-4">
-            <label for="family" class="block text-gray-700 font-bold mb-2">fontFamily</label>
-            <input
-              id="family"
-              name="family"
-              class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
-              placeholder="Enter a font family"
-              v-model="watermarkOptions.font.fontFamily"
-            />
-          </div>
+
+        <div>
+          <label for="color" class="block mb-1 lg:mb-2">fontColor</label>
+          <input
+            type="text"
+            id="color"
+            name="color"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+            placeholder="Enter a color value"
+            v-model="watermarkOptions.font.color"
+          />
+        </div>
+        <div>
+          <label for="size" class="block mb-1 lg:mb-2">fontSize</label>
+          <input
+            type="number"
+            id="size"
+            name="size"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+            placeholder="Enter a font size"
+            v-model="watermarkOptions.font.fontSize"
+          />
+        </div>
+        <div>
+          <label for="weight" class="block mb-1 lg:mb-2">fontWeight</label>
+          <input
+            id="weight"
+            name="weight"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+            placeholder="Enter a font weight"
+            v-model="watermarkOptions.font.fontWeight"
+          />
+        </div>
+        <div>
+          <label for="style" class="block mb-1 lg:mb-2">fontStyle</label>
+          <input
+            id="style"
+            name="style"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+            placeholder="Enter a font style"
+            v-model="watermarkOptions.font.fontStyle"
+          />
+        </div>
+        <div>
+          <label for="family" class="block mb-1 lg:mb-2">fontFamily</label>
+          <input
+            id="family"
+            name="family"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
+            placeholder="Enter a font family"
+            v-model="watermarkOptions.font.fontFamily"
+          />
         </div>
-      </section>
-    </div>
-  </div>
+      </div>
+    </section>
+  </main>
 </template>
 
-<style scoped>
-.content {
-  height: 800px;
-  width: 800px;
-  background: rgb(98, 215, 244);
-  padding: 20px;
+<style>
+.watermark > div {
+  flex: 1;
 }
 </style>
diff --git a/playground/src/components/Navbar.vue b/playground/src/components/Navbar.vue
index b150c12..9d60bd3 100644
--- a/playground/src/components/Navbar.vue
+++ b/playground/src/components/Navbar.vue
@@ -5,16 +5,22 @@
     <div class="px-4">
       <div class="flex items-center justify-between h-16">
         <div class="flex-shrink-0 text-white font-bold">@watermarkify/vue-watermark</div>
-        <div class="flex">
+        <div>
           <a
             href="https://github.com/watermarkify/vue-watermark"
             target="_blank"
             rel="noopener noreferrer"
-            class="text-white hover:text-blue-200 px-3 py-2 rounded-md text-md font-medium"
+            class="text-white hover:text-blue-200 text-md font-medium"
           >
-            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-7 w-7 lg:mr-5 fill-current"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
               <path
-                d="M12 0a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.5-1.3-1.2-1.6-1.2-1.6-.9-.6.1-.6.1-.6 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 3 .8.1-.7.4-1.1.8-1.4-2.7-.3-5.5-1.4-5.5-6.2 0-1.4.5-2.5 1.1-3.4-.1-.3-.5-1.6.1-3.4 0 0 1.1-.3 3.5 1.3 1-.3 2-.5 3-.5s2 .2 3 .5c2.4-1.6 3.4-1.3 3.4-1.3.6 1.8.2 3.1.1 3.4.6.9 1.1 2 1.1 3.4 0 4.8-2.8 5.8-5.5 6.2.4.4.8 1.2.8 2.4v3.5c0 .3.2.7.8.6A12 12 0 0 0 12 0z"
+                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
               />
             </svg>
           </a>
diff --git a/playground/src/style.css b/playground/src/style.css
index b803d58..4d95da4 100644
--- a/playground/src/style.css
+++ b/playground/src/style.css
@@ -32,12 +32,12 @@ a:hover {
   color: #535bf2;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
 }
 
 h1 {
@@ -70,6 +70,9 @@ button:focus-visible {
 
 #app {
   width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
   margin: 0 auto;
   text-align: center;
 }
diff --git a/playground/windi.config.ts b/playground/windi.config.ts
new file mode 100644
index 0000000..aa87a7f
--- /dev/null
+++ b/playground/windi.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'windicss/helpers'
+import colors from 'windicss/colors'
+import plugin from 'windicss/plugin'
+
+export default defineConfig({
+    theme: {
+        extend: {
+            colors: {
+                watermarkify: {
+                    500: '#62D7F4',
+                },
+            },
+        },
+    },
+    plugins: [
+        plugin(({ addUtilities }) => {
+          const newUtilities = {
+            '.flex-2': {
+              flex: '2',
+            },
+          }
+          addUtilities(newUtilities)
+        }),
+    ],
+})