diff --git a/components/ui/Alerts/ErrorFullWidth.vue b/components/ui/Alerts/ErrorFullWidth.vue
index 31ce271..c7c870e 100644
--- a/components/ui/Alerts/ErrorFullWidth.vue
+++ b/components/ui/Alerts/ErrorFullWidth.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/lJRHfnHJZf'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <div class="w-full text-white bg-red-500">
                 <div class="container flex items-center justify-between px-6 py-4 mx-auto">
diff --git a/components/ui/Alerts/ErrorPop.vue b/components/ui/Alerts/ErrorPop.vue
index 99c5b4f..0f2d5fa 100644
--- a/components/ui/Alerts/ErrorPop.vue
+++ b/components/ui/Alerts/ErrorPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/sctiUEG34N'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
                 <div class="flex items-center justify-center w-12 bg-red-500">
diff --git a/components/ui/Alerts/InfoFullWidth.vue b/components/ui/Alerts/InfoFullWidth.vue
index 2bc0b85..d08e95f 100644
--- a/components/ui/Alerts/InfoFullWidth.vue
+++ b/components/ui/Alerts/InfoFullWidth.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/Gpwzv1LTem'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <div class="w-full text-white bg-blue-500">
                 <div class="container flex items-center justify-between px-6 py-4 mx-auto">
diff --git a/components/ui/Alerts/InfoPop.vue b/components/ui/Alerts/InfoPop.vue
index 08b8b97..464200f 100644
--- a/components/ui/Alerts/InfoPop.vue
+++ b/components/ui/Alerts/InfoPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/Me2GNwjoM2'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
                 <div class="flex items-center justify-center w-12 bg-blue-500">
diff --git a/components/ui/Alerts/NotificationPop.vue b/components/ui/Alerts/NotificationPop.vue
index d224822..7ff21ef 100644
--- a/components/ui/Alerts/NotificationPop.vue
+++ b/components/ui/Alerts/NotificationPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/ucwQxRf95Y'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
                 <div class="w-2 bg-gray-800 dark:bg-gray-900"></div>
diff --git a/components/ui/Alerts/SuccessFullWidth.vue b/components/ui/Alerts/SuccessFullWidth.vue
index a55f4d5..8d61b6f 100644
--- a/components/ui/Alerts/SuccessFullWidth.vue
+++ b/components/ui/Alerts/SuccessFullWidth.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/rLsRyjC55H'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <div class="w-full text-white bg-green-500">
                 <div class="container flex items-center justify-between px-6 py-4 mx-auto">
diff --git a/components/ui/Alerts/SuccessPop.vue b/components/ui/Alerts/SuccessPop.vue
index 217c4b5..8e236ec 100644
--- a/components/ui/Alerts/SuccessPop.vue
+++ b/components/ui/Alerts/SuccessPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/tAdSE1P1Ur'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
                 <div class="flex items-center justify-center w-12 bg-green-500">
diff --git a/components/ui/Alerts/WarningFullWidth.vue b/components/ui/Alerts/WarningFullWidth.vue
index b39022d..5404b45 100644
--- a/components/ui/Alerts/WarningFullWidth.vue
+++ b/components/ui/Alerts/WarningFullWidth.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/dRHZ0xKKzd'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <div class="w-full text-white bg-yellow-400">
                 <div class="container flex items-center justify-between px-6 py-4 mx-auto">
diff --git a/components/ui/Alerts/WarningPop.vue b/components/ui/Alerts/WarningPop.vue
index f249a72..88b0064 100644
--- a/components/ui/Alerts/WarningPop.vue
+++ b/components/ui/Alerts/WarningPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/tXjHspvGiZ'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
                 <div class="flex items-center justify-center w-12 bg-yellow-400">
diff --git a/components/ui/Authentication/LoginWithSideImage.vue b/components/ui/Authentication/LoginWithSideImage.vue
index 28cef64..883710a 100644
--- a/components/ui/Authentication/LoginWithSideImage.vue
+++ b/components/ui/Authentication/LoginWithSideImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/WGtgPAHN45'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="flex max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 lg:max-w-4xl">
                 <div class="hidden bg-cover lg:block lg:w-1/2" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80')"></div>
diff --git a/components/ui/Authentication/LoginWithSocialMediaLinks.vue b/components/ui/Authentication/LoginWithSocialMediaLinks.vue
index 74d40ad..9494bd9 100644
--- a/components/ui/Authentication/LoginWithSocialMediaLinks.vue
+++ b/components/ui/Authentication/LoginWithSocialMediaLinks.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/C7LVpatIva'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800">
                 <h1 class="text-3xl font-semibold text-center text-gray-700 dark:text-white">Brand</h1>
diff --git a/components/ui/Authentication/SimpleLogin.vue b/components/ui/Authentication/SimpleLogin.vue
index 14bfe75..daa3557 100644
--- a/components/ui/Authentication/SimpleLogin.vue
+++ b/components/ui/Authentication/SimpleLogin.vue
@@ -1,5 +1,5 @@
 <template>
-     <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/3UluZHaRXK'">
+     <view-component :name="name" :code="code" >
         <div class="px-3 py-6" slot="component">
             <div class="w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
                 <div class="px-6 py-4">
diff --git a/components/ui/Buttons/Primary.vue b/components/ui/Buttons/Primary.vue
index adc616c..91a4b60 100644
--- a/components/ui/Buttons/Primary.vue
+++ b/components/ui/Buttons/Primary.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/fD5MVNLO28'">
+    <view-component :name="name" :code="code">
         <div class="flex items-center justify-center px-3 py-8" slot="component">
             <button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">
                 Primary
diff --git a/components/ui/Buttons/WithIcon.vue b/components/ui/Buttons/WithIcon.vue
index 91e4c74..d628f6f 100644
--- a/components/ui/Buttons/WithIcon.vue
+++ b/components/ui/Buttons/WithIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/FKYOf7NSaX'">
+    <view-component :name="name" :code="code">
         <div class="flex items-center justify-center px-3 py-6" slot="component">
             <button class="flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">
                 <svg class="w-5 h-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
diff --git a/components/ui/Buttons/WithMenu.vue b/components/ui/Buttons/WithMenu.vue
index 56a70d6..33fc4e9 100644
--- a/components/ui/Buttons/WithMenu.vue
+++ b/components/ui/Buttons/WithMenu.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/2gs4tn6voj'">
+    <view-component :name="name" :code="code">
         <div class="flex justify-center px-3 pt-6 pb-40" slot="component">
             <div class="flex items-center">
                 <button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">Download</button>
diff --git a/components/ui/Cards/Article.vue b/components/ui/Cards/Article.vue
index a6b112b..c70e990 100644
--- a/components/ui/Cards/Article.vue
+++ b/components/ui/Cards/Article.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/4ldoMLp6Cm'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="max-w-2xl px-8 py-4 mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800">
                 <div class="flex items-center justify-between">
diff --git a/components/ui/Cards/ArticleWithImage.vue b/components/ui/Cards/ArticleWithImage.vue
index b222b60..27e11fe 100644
--- a/components/ui/Cards/ArticleWithImage.vue
+++ b/components/ui/Cards/ArticleWithImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/qJrL5MCBiM'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="max-w-2xl mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
                 <img class="object-cover w-full h-64" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article">
diff --git a/components/ui/Cards/ArticleWithSMIcons.vue b/components/ui/Cards/ArticleWithSMIcons.vue
index a8ccd2b..5f7509d 100644
--- a/components/ui/Cards/ArticleWithSMIcons.vue
+++ b/components/ui/Cards/ArticleWithSMIcons.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/j6P5jZqSfh'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="w-full max-w-sm px-4 py-3 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
                 <div class="flex items-center justify-between">
diff --git a/components/ui/Cards/Product.vue b/components/ui/Cards/Product.vue
index c57323d..ef5f723 100644
--- a/components/ui/Cards/Product.vue
+++ b/components/ui/Cards/Product.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/vsESqicnHy'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
                 <div class="px-4 py-2">
diff --git a/components/ui/Cards/ProductWithEvaluation.vue b/components/ui/Cards/ProductWithEvaluation.vue
index 27b30ad..be95fea 100644
--- a/components/ui/Cards/ProductWithEvaluation.vue
+++ b/components/ui/Cards/ProductWithEvaluation.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/gmih0DXnHV'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="flex max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
                 <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
diff --git a/components/ui/Cards/SimpleProduct.vue b/components/ui/Cards/SimpleProduct.vue
index 9c31f0d..91a3b2f 100644
--- a/components/ui/Cards/SimpleProduct.vue
+++ b/components/ui/Cards/SimpleProduct.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/YtK2HJTgmQ'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="flex flex-col items-center justify-center max-w-sm mx-auto">
                 <div class="w-full h-64 bg-gray-300 bg-center bg-cover rounded-lg shadow-md" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div>
diff --git a/components/ui/Cards/Testimonial.vue b/components/ui/Cards/Testimonial.vue
index 4d2b0cb..77fc2cf 100644
--- a/components/ui/Cards/Testimonial.vue
+++ b/components/ui/Cards/Testimonial.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/P6weQfLvXr'">
+    <view-component :name="name" :code="code">
         <div class="px-3 pt-16 pb-6" slot="component">
             <div class="max-w-md px-8 py-4 mx-auto mt-16 bg-white rounded-lg shadow-lg dark:bg-gray-800">
                 <div class="flex justify-center -mt-16 md:justify-end">
diff --git a/components/ui/Cards/User.vue b/components/ui/Cards/User.vue
index b133a51..963f8a2 100644
--- a/components/ui/Cards/User.vue
+++ b/components/ui/Cards/User.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/3z4AD1G8sU'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
                 <img class="object-cover w-full h-56" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
diff --git a/components/ui/Cards/UserWithDetails.vue b/components/ui/Cards/UserWithDetails.vue
index f3f30b1..181db1b 100644
--- a/components/ui/Cards/UserWithDetails.vue
+++ b/components/ui/Cards/UserWithDetails.vue
@@ -1,5 +1,5 @@
 <template>
-   <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/k9lv2AY9sl'">
+   <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
                 <img class="object-cover object-center w-full h-56" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
diff --git a/components/ui/Dropdowns/MultiLevel.vue b/components/ui/Dropdowns/MultiLevel.vue
index 124d873..4d83649 100644
--- a/components/ui/Dropdowns/MultiLevel.vue
+++ b/components/ui/Dropdowns/MultiLevel.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/82gazGIFeX'">
+    <view-component :name="name" :code="code">
         <div class="flex justify-end px-3 pt-6 pb-104 sm:justify-center" slot="component">
             <div class="relative inline-block ">
                 <!-- Dropdown toggle button -->
diff --git a/components/ui/Dropdowns/MultiLevelWithIcons.vue b/components/ui/Dropdowns/MultiLevelWithIcons.vue
index 23b2693..d32ba4e 100644
--- a/components/ui/Dropdowns/MultiLevelWithIcons.vue
+++ b/components/ui/Dropdowns/MultiLevelWithIcons.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/RYS8YbyyYw'">
+    <view-component :name="name" :code="code">
         <div class="flex justify-end px-3 pt-6 pb-104 sm:justify-center" slot="component">
            <div class="relative inline-block ">
                 <!-- Dropdown toggle button -->
diff --git a/components/ui/Dropdowns/Notification.vue b/components/ui/Dropdowns/Notification.vue
index 9c3d778..4ffcfb5 100644
--- a/components/ui/Dropdowns/Notification.vue
+++ b/components/ui/Dropdowns/Notification.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/IzgMEVBwHg'">
+    <view-component :name="name" :code="code">
         <div class="flex justify-end px-3 pt-6 pb-96 md:justify-center" slot="component">
             <div class="relative inline-block">
                 <!-- Dropdown toggle button -->
diff --git a/components/ui/Dropdowns/Simple.vue b/components/ui/Dropdowns/Simple.vue
index db30ad5..dfa036e 100644
--- a/components/ui/Dropdowns/Simple.vue
+++ b/components/ui/Dropdowns/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/XmgV7bVESu'">
+    <view-component :name="name" :code="code">
         <div class="flex justify-end px-3 pt-6 pb-72 sm:justify-center" slot="component">
             <div class="relative inline-block">
                 <!-- Dropdown toggle button -->
diff --git a/components/ui/Dropdowns/UserInfo.vue b/components/ui/Dropdowns/UserInfo.vue
index 3f77be0..3d82443 100644
--- a/components/ui/Dropdowns/UserInfo.vue
+++ b/components/ui/Dropdowns/UserInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/ovLtK6L4os'">
+    <view-component :name="name" :code="code">
         <div class="flex justify-end px-3 pt-6 pb-128 sm:justify-center" slot="component">
             <div class="relative inline-block ">
                 <!-- Dropdown toggle button -->
diff --git a/components/ui/Dropdowns/UserInfoWithIcons.vue b/components/ui/Dropdowns/UserInfoWithIcons.vue
index 63d878a..560e989 100644
--- a/components/ui/Dropdowns/UserInfoWithIcons.vue
+++ b/components/ui/Dropdowns/UserInfoWithIcons.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/YhrZ3IvlLv'">
+    <view-component :name="name" :code="code">
         <div class="flex justify-end px-3 pt-6 pb-128 sm:justify-center" slot="component">
             <div class="relative inline-block ">
                 <!-- Dropdown toggle button -->
diff --git a/components/ui/Footers/Simple.vue b/components/ui/Footers/Simple.vue
index 6fac458..4e20d85 100644
--- a/components/ui/Footers/Simple.vue
+++ b/components/ui/Footers/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/QNWVmmK7T2'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <footer
                 class="flex flex-col items-center justify-between px-6 py-4 bg-white dark:bg-gray-800 sm:flex-row"
diff --git a/components/ui/Footers/WithCta.vue b/components/ui/Footers/WithCta.vue
index 7b500a4..e9866bc 100644
--- a/components/ui/Footers/WithCta.vue
+++ b/components/ui/Footers/WithCta.vue
@@ -1,5 +1,5 @@
 <template>
-     <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/QFlk5yNYSR'">
+     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <footer class="bg-white dark:bg-gray-800">
                 <div class="container px-6 py-8 mx-auto">
diff --git a/components/ui/Footers/WithDetails.vue b/components/ui/Footers/WithDetails.vue
index f5561ef..7c6bcbe 100644
--- a/components/ui/Footers/WithDetails.vue
+++ b/components/ui/Footers/WithDetails.vue
@@ -1,5 +1,5 @@
 <template>
-     <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/Xyh38EO7QQ'">
+     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <footer class="bg-white dark:bg-gray-800">
                 <div class="container px-6 py-4 mx-auto">
diff --git a/components/ui/Footers/WithLinks.vue b/components/ui/Footers/WithLinks.vue
index d16704c..efb9af9 100644
--- a/components/ui/Footers/WithLinks.vue
+++ b/components/ui/Footers/WithLinks.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/UIA0rt1qBU'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <footer class="bg-white dark:bg-gray-800">
                 <div class="container px-6 py-8 mx-auto">
diff --git a/components/ui/Footers/WithSubscribeForm.vue b/components/ui/Footers/WithSubscribeForm.vue
index 227b1e8..2f3088b 100644
--- a/components/ui/Footers/WithSubscribeForm.vue
+++ b/components/ui/Footers/WithSubscribeForm.vue
@@ -1,5 +1,5 @@
 <template>
-     <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/UAj5Mv9zRw'">
+     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <footer class="flex justify-center px-4 text-gray-800 bg-white dark:text-white dark:bg-gray-800">
                 <div class="container py-6">
diff --git a/components/ui/Forms/Contact.vue b/components/ui/Forms/Contact.vue
index 1386b77..e4943a2 100644
--- a/components/ui/Forms/Contact.vue
+++ b/components/ui/Forms/Contact.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/vYH1zC4eRw'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <section class="w-full max-w-2xl px-6 py-4 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
                 <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
diff --git a/components/ui/Forms/Newsletter.vue b/components/ui/Forms/Newsletter.vue
index 8d78a80..4942541 100644
--- a/components/ui/Forms/Newsletter.vue
+++ b/components/ui/Forms/Newsletter.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/uNd9oPxGhL'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <section class="flex flex-col max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 md:flex-row md:h-48">
                 <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
diff --git a/components/ui/Forms/Search.vue b/components/ui/Forms/Search.vue
index f877d09..a6f02ef 100644
--- a/components/ui/Forms/Search.vue
+++ b/components/ui/Forms/Search.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/7e7pEEHwAY'">
+    <view-component :name="name" :code="code">
         <div class="px-3 pt-6 pb-80" slot="component">
             <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
                 <div class="relative">
diff --git a/components/ui/Forms/Simple.vue b/components/ui/Forms/Simple.vue
index 31af2a8..422df11 100644
--- a/components/ui/Forms/Simple.vue
+++ b/components/ui/Forms/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/oCePm5Vaed'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <section class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
                 <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">Account settings</h2>
diff --git a/components/ui/Forms/SimpleNewsletter.vue b/components/ui/Forms/SimpleNewsletter.vue
index 41e5d1b..c64f253 100644
--- a/components/ui/Forms/SimpleNewsletter.vue
+++ b/components/ui/Forms/SimpleNewsletter.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/Cqk9UrM5RN'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
                 <div class="max-w-3xl px-6 py-16 mx-auto text-center">
diff --git a/components/ui/Heros/CenterContent.vue b/components/ui/Heros/CenterContent.vue
index 69b2eca..ee6f094 100644
--- a/components/ui/Heros/CenterContent.vue
+++ b/components/ui/Heros/CenterContent.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/8xusXYyo5R'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
                 <nav class="container p-6 mx-auto lg:flex lg:justify-between lg:items-center">
diff --git a/components/ui/Heros/ECommerce.vue b/components/ui/Heros/ECommerce.vue
index 7e79403..590841a 100644
--- a/components/ui/Heros/ECommerce.vue
+++ b/components/ui/Heros/ECommerce.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/4U0yr9LqwS'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
                 <nav class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
diff --git a/components/ui/Heros/WithBGImage.vue b/components/ui/Heros/WithBGImage.vue
index 2d281c8..f617238 100644
--- a/components/ui/Heros/WithBGImage.vue
+++ b/components/ui/Heros/WithBGImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/z4Od3xIvRD'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header>
                 <nav class="bg-white shadow dark:bg-gray-800">
diff --git a/components/ui/Heros/WithImage.vue b/components/ui/Heros/WithImage.vue
index 0a4b301..282087c 100644
--- a/components/ui/Heros/WithImage.vue
+++ b/components/ui/Heros/WithImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/wIjcBsgZLl?file=config'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
                 <nav class="border-b dark:border-gray-700">
diff --git a/components/ui/Heros/WithNewsletterForm.vue b/components/ui/Heros/WithNewsletterForm.vue
index fe97652..22b22d6 100644
--- a/components/ui/Heros/WithNewsletterForm.vue
+++ b/components/ui/Heros/WithNewsletterForm.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/qKJnbGgN17'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
                 <nav class="border-t-4 border-indigo-500">
diff --git a/components/ui/Heros/WithPattern.vue b/components/ui/Heros/WithPattern.vue
index dd3b5a8..d9ab99e 100644
--- a/components/ui/Heros/WithPattern.vue
+++ b/components/ui/Heros/WithPattern.vue
@@ -1,5 +1,5 @@
 <template>
-     <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/rHZIWEbLtQ'">
+     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header class="bg-gray-900 pattern">
                 <div class="container px-6 mx-auto">
diff --git a/components/ui/Heros/WithSideImage.vue b/components/ui/Heros/WithSideImage.vue
index a91c725..373daa9 100644
--- a/components/ui/Heros/WithSideImage.vue
+++ b/components/ui/Heros/WithSideImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/rRHpjTrb6z'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
                 <nav class="px-6 py-4 shadow">
diff --git a/components/ui/Heros/WithSlide.vue b/components/ui/Heros/WithSlide.vue
index 3297bd0..ecb841d 100644
--- a/components/ui/Heros/WithSlide.vue
+++ b/components/ui/Heros/WithSlide.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/eufp9MSHGo'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
                 <nav class="bg-white dark:bg-gray-800">
@@ -26,7 +26,7 @@
                     </div>
                 </nav>
 
-                <div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center lg:space-x-6">
+                <div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
                     <div class="flex flex-col items-center w-full lg:flex-row lg:w-1/2">
                         <div class="flex justify-center order-2 mt-6 lg:mt-0 lg:space-y-3 lg:flex-col">
                             <button class="w-3 h-3 mx-2 bg-blue-500 rounded-full lg:mx-0 focus:outline-none"></button>
@@ -84,7 +84,7 @@
                 </div>
             </nav>
 
-            <div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center lg:space-x-6">
+            <div class="container flex flex-col px-6 py-4 mx-auto space-y-6 lg:h-128 lg:py-16 lg:flex-row lg:items-center">
                 <div class="flex flex-col items-center w-full lg:flex-row lg:w-1/2">
                     <div class="flex justify-center order-2 mt-6 lg:mt-0 lg:space-y-3 lg:flex-col">
                         <button class="w-3 h-3 mx-2 bg-blue-500 rounded-full lg:mx-0 focus:outline-none"></button>
diff --git a/components/ui/Navbars/ECommerce.vue b/components/ui/Navbars/ECommerce.vue
index 9a5d1aa..2e86fef 100644
--- a/components/ui/Navbars/ECommerce.vue
+++ b/components/ui/Navbars/ECommerce.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/FaNjw7K9Cm'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <nav class="bg-white shadow dark:bg-gray-800">
                 <div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
diff --git a/components/ui/Navbars/Simple.vue b/components/ui/Navbars/Simple.vue
index 419378b..baeae41 100644
--- a/components/ui/Navbars/Simple.vue
+++ b/components/ui/Navbars/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/awf4Dirl8O'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <nav class="bg-white shadow dark:bg-gray-800">
                 <div class="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300">
diff --git a/components/ui/Navbars/WithAvatar.vue b/components/ui/Navbars/WithAvatar.vue
index 9e7f007..e18c325 100644
--- a/components/ui/Navbars/WithAvatar.vue
+++ b/components/ui/Navbars/WithAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/MDa1Xu1LAL'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <nav class="bg-white shadow dark:bg-gray-800">
                 <div class="container px-6 py-4 mx-auto">
diff --git a/components/ui/Navbars/WithCategories.vue b/components/ui/Navbars/WithCategories.vue
index 17ad4ba..6d4c3b6 100644
--- a/components/ui/Navbars/WithCategories.vue
+++ b/components/ui/Navbars/WithCategories.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/hhBBY96OMj'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <nav class="bg-white shadow dark:bg-gray-800">
                 <div class="container px-6 py-3 mx-auto">
diff --git a/components/ui/Navbars/WithSearch.vue b/components/ui/Navbars/WithSearch.vue
index 1af6787..e327357 100644
--- a/components/ui/Navbars/WithSearch.vue
+++ b/components/ui/Navbars/WithSearch.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/cAQwvOmYXP'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <nav class="bg-white shadow dark:bg-gray-800">
                 <div class="container px-6 py-3 mx-auto md:flex">
diff --git a/components/ui/Navbars/WithSocialMediaLinks.vue b/components/ui/Navbars/WithSocialMediaLinks.vue
index 531b74c..756e377 100644
--- a/components/ui/Navbars/WithSocialMediaLinks.vue
+++ b/components/ui/Navbars/WithSocialMediaLinks.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/V3iK65Oj1V'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <nav class="bg-white shadow dark:bg-gray-800">
                 <div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
diff --git a/components/ui/Pagination/Simple.vue b/components/ui/Pagination/Simple.vue
index b64da0e..9100496 100644
--- a/components/ui/Pagination/Simple.vue
+++ b/components/ui/Pagination/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/SVPNBUEinZ'">
+    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
             <div class="flex items-center justify-center">
                 <div class="flex">
diff --git a/components/ui/Pricing/Popular.vue b/components/ui/Pricing/Popular.vue
index 11a63c2..0c10e48 100644
--- a/components/ui/Pricing/Popular.vue
+++ b/components/ui/Pricing/Popular.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/tBMgKR6dDn'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
                 <div class="container px-6 py-8 mx-auto">
diff --git a/components/ui/Pricing/Simple.vue b/components/ui/Pricing/Simple.vue
index d2a190d..f8d70fd 100644
--- a/components/ui/Pricing/Simple.vue
+++ b/components/ui/Pricing/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/DLbvdzHFBL'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
                 <div class="container px-6 py-8 mx-auto">
diff --git a/components/ui/Pricing/WithNavigation.vue b/components/ui/Pricing/WithNavigation.vue
index 6457b14..20bdbe2 100644
--- a/components/ui/Pricing/WithNavigation.vue
+++ b/components/ui/Pricing/WithNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/WFBk43I8yF'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
                 <div class="container px-6 py-8 mx-auto">
diff --git a/components/ui/Sections/AboutMe.vue b/components/ui/Sections/AboutMe.vue
index 5b7e441..bb72b4b 100644
--- a/components/ui/Sections/AboutMe.vue
+++ b/components/ui/Sections/AboutMe.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/O9IB0nmgLy'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
                 <div class="container px-6 py-8 mx-auto">
diff --git a/components/ui/Sections/Feature.vue b/components/ui/Sections/Feature.vue
index 61c9474..938a178 100644
--- a/components/ui/Sections/Feature.vue
+++ b/components/ui/Sections/Feature.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/v5uvHJHJ0I'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
                 <div class="container px-6 py-8 mx-auto">
diff --git a/components/ui/Sections/OurTeam.vue b/components/ui/Sections/OurTeam.vue
index e201d92..9fa7164 100644
--- a/components/ui/Sections/OurTeam.vue
+++ b/components/ui/Sections/OurTeam.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/TDe8Uty1Qy'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="container p-6 mx-auto bg-white dark:bg-gray-800">
                 <h2 class="text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
diff --git a/components/ui/Sections/ParagraphWithImage.vue b/components/ui/Sections/ParagraphWithImage.vue
index 1ea3fd9..19c6e7d 100644
--- a/components/ui/Sections/ParagraphWithImage.vue
+++ b/components/ui/Sections/ParagraphWithImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/TR4lhfvru8'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-gray-100 dark:bg-gray-900 lg:py-12 lg:flex lg:justify-center">
                 <div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
diff --git a/components/ui/Sections/ProductsWithSideLinks.vue b/components/ui/Sections/ProductsWithSideLinks.vue
index 779b9cc..030e4cf 100644
--- a/components/ui/Sections/ProductsWithSideLinks.vue
+++ b/components/ui/Sections/ProductsWithSideLinks.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/fPaG4JGajk'">
+    <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-900">
                 <div class="container px-6 py-8 mx-auto">
diff --git a/components/ui/Sidebar/WithAvatar.vue b/components/ui/Sidebar/WithAvatar.vue
index ac2681c..a4cdf42 100644
--- a/components/ui/Sidebar/WithAvatar.vue
+++ b/components/ui/Sidebar/WithAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/xyZQsjkZRq'">
+    <view-component :name="name" :code="code">
         <div slot="component">
             <div class="flex flex-col w-64 h-screen py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
                 <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Brand</h2>
diff --git a/components/ui/Sidebar/WithSearch.vue b/components/ui/Sidebar/WithSearch.vue
index b656972..610042b 100644
--- a/components/ui/Sidebar/WithSearch.vue
+++ b/components/ui/Sidebar/WithSearch.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/RtdsASpGev'">
+    <view-component :name="name" :code="code">
         <div slot="component">
              <div class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
                 <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
diff --git a/components/utilities/ViewComponent.vue b/components/utilities/ViewComponent.vue
index 338fdb2..efdead5 100644
--- a/components/utilities/ViewComponent.vue
+++ b/components/utilities/ViewComponent.vue
@@ -28,12 +28,6 @@
                     </svg>
                 </app-button>
 
-                <a target="_blank" :href="playUrl" class="block p-1 text-gray-600 bg-gray-200 rounded-md hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                    </svg>
-                </a>
-
                 <app-button v-clipboard:success="onCopy" v-clipboard:copy="code" class="p-1 text-gray-600 bg-gray-200 rounded-md hover:text-gray-700 hover:bg-gray-400 focus:outline-none" aria-label="Copy">
                     <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
@@ -71,7 +65,7 @@ import AppButton from "~/components/utilities/AppButton.vue";
 import CodeSnippet from "./CodeSnippet";
 
 export default {
-    props: ['name' , 'code', 'playUrl'],
+    props: ['name' , 'code'],
 
     components: {
         AppButton,