diff --git a/components/ui/Alerts/ErrorFullWidth.vue b/components/ui/Alerts/ErrorFullWidth.vue
index c7c870e..31ce271 100644
--- a/components/ui/Alerts/ErrorFullWidth.vue
+++ b/components/ui/Alerts/ErrorFullWidth.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/lJRHfnHJZf'">
         <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 0f2d5fa..99c5b4f 100644
--- a/components/ui/Alerts/ErrorPop.vue
+++ b/components/ui/Alerts/ErrorPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/sctiUEG34N'">
         <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 d08e95f..2bc0b85 100644
--- a/components/ui/Alerts/InfoFullWidth.vue
+++ b/components/ui/Alerts/InfoFullWidth.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/Gpwzv1LTem'">
         <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 464200f..08b8b97 100644
--- a/components/ui/Alerts/InfoPop.vue
+++ b/components/ui/Alerts/InfoPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/Me2GNwjoM2'">
         <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 7ff21ef..d224822 100644
--- a/components/ui/Alerts/NotificationPop.vue
+++ b/components/ui/Alerts/NotificationPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/ucwQxRf95Y'">
         <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 8d61b6f..a55f4d5 100644
--- a/components/ui/Alerts/SuccessFullWidth.vue
+++ b/components/ui/Alerts/SuccessFullWidth.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/rLsRyjC55H'">
         <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 8e236ec..217c4b5 100644
--- a/components/ui/Alerts/SuccessPop.vue
+++ b/components/ui/Alerts/SuccessPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/tAdSE1P1Ur'">
         <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 5404b45..b39022d 100644
--- a/components/ui/Alerts/WarningFullWidth.vue
+++ b/components/ui/Alerts/WarningFullWidth.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/dRHZ0xKKzd'">
         <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 88b0064..f249a72 100644
--- a/components/ui/Alerts/WarningPop.vue
+++ b/components/ui/Alerts/WarningPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/tXjHspvGiZ'">
         <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 9ae072e..e6ac3c1 100644
--- a/components/ui/Authentication/LoginWithSideImage.vue
+++ b/components/ui/Authentication/LoginWithSideImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/BiEUfIhZoA'">
         <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/LoginWithSocailMediaLinks.vue b/components/ui/Authentication/LoginWithSocailMediaLinks.vue
index d27cd57..db21ac9 100644
--- a/components/ui/Authentication/LoginWithSocailMediaLinks.vue
+++ b/components/ui/Authentication/LoginWithSocailMediaLinks.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/KiEKiGCAYc'">
         <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 9fdad4d..54b97fa 100644
--- a/components/ui/Authentication/SimpleLogin.vue
+++ b/components/ui/Authentication/SimpleLogin.vue
@@ -1,5 +1,5 @@
 <template>
-     <view-component :name="name" :code="code">
+     <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/hFoPtYZ3Rh'">
         <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 585247d..7b43d94 100644
--- a/components/ui/Buttons/Primary.vue
+++ b/components/ui/Buttons/Primary.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/p7yNHfXifd'">
         <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-blue-600 rounded-md dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
                 Primary
diff --git a/components/ui/Buttons/WithIcon.vue b/components/ui/Buttons/WithIcon.vue
index f90ff5f..c073b4c 100644
--- a/components/ui/Buttons/WithIcon.vue
+++ b/components/ui/Buttons/WithIcon.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/M9yIB1meqb'">
         <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-blue-600 rounded-md dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
                 <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 4d614a3..89eb9be 100644
--- a/components/ui/Buttons/WithMenu.vue
+++ b/components/ui/Buttons/WithMenu.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/KMBxCUj7ts'">
         <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-blue-600 rounded-md dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">Download</button>
diff --git a/components/ui/Cards/Article.vue b/components/ui/Cards/Article.vue
index c70e990..a6b112b 100644
--- a/components/ui/Cards/Article.vue
+++ b/components/ui/Cards/Article.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/4ldoMLp6Cm'">
         <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 27e11fe..b222b60 100644
--- a/components/ui/Cards/ArticleWithImage.vue
+++ b/components/ui/Cards/ArticleWithImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/qJrL5MCBiM'">
         <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 5f7509d..a8ccd2b 100644
--- a/components/ui/Cards/ArticleWithSMIcons.vue
+++ b/components/ui/Cards/ArticleWithSMIcons.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/j6P5jZqSfh'">
         <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 ef5f723..c57323d 100644
--- a/components/ui/Cards/Product.vue
+++ b/components/ui/Cards/Product.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/vsESqicnHy'">
         <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 be95fea..27b30ad 100644
--- a/components/ui/Cards/ProductWithEvaluation.vue
+++ b/components/ui/Cards/ProductWithEvaluation.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/gmih0DXnHV'">
         <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 91a3b2f..9c31f0d 100644
--- a/components/ui/Cards/SimpleProduct.vue
+++ b/components/ui/Cards/SimpleProduct.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/YtK2HJTgmQ'">
         <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 77fc2cf..4d2b0cb 100644
--- a/components/ui/Cards/Testimonial.vue
+++ b/components/ui/Cards/Testimonial.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/P6weQfLvXr'">
         <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 963f8a2..b133a51 100644
--- a/components/ui/Cards/User.vue
+++ b/components/ui/Cards/User.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/3z4AD1G8sU'">
         <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 181db1b..f3f30b1 100644
--- a/components/ui/Cards/UserWithDetails.vue
+++ b/components/ui/Cards/UserWithDetails.vue
@@ -1,5 +1,5 @@
 <template>
-   <view-component :name="name" :code="code">
+   <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/k9lv2AY9sl'">
         <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/Notification.vue b/components/ui/Dropdowns/Notification.vue
index 3a4c683..107e537 100644
--- a/components/ui/Dropdowns/Notification.vue
+++ b/components/ui/Dropdowns/Notification.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/ydXFaczj3W'">
         <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 cb0e4af..7ed284a 100644
--- a/components/ui/Dropdowns/Simple.vue
+++ b/components/ui/Dropdowns/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/NJMf2PkO6S'">
         <div class="flex justify-end px-3 pt-6 pb-56 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 4e20d85..6fac458 100644
--- a/components/ui/Footers/Simple.vue
+++ b/components/ui/Footers/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/QNWVmmK7T2'">
         <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/WithDetails.vue b/components/ui/Footers/WithDetails.vue
index e9e28a2..3bfca11 100644
--- a/components/ui/Footers/WithDetails.vue
+++ b/components/ui/Footers/WithDetails.vue
@@ -1,5 +1,5 @@
 <template>
-     <view-component :name="name" :code="code">
+     <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/Xyh38EO7QQ'">
         <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 ac929cf..b48ef63 100644
--- a/components/ui/Footers/WithLinks.vue
+++ b/components/ui/Footers/WithLinks.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/UIA0rt1qBU'">
         <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 2f3088b..227b1e8 100644
--- a/components/ui/Footers/WithSubscribeForm.vue
+++ b/components/ui/Footers/WithSubscribeForm.vue
@@ -1,5 +1,5 @@
 <template>
-     <view-component :name="name" :code="code">
+     <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/UAj5Mv9zRw'">
         <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 e4943a2..1386b77 100644
--- a/components/ui/Forms/Contact.vue
+++ b/components/ui/Forms/Contact.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/vYH1zC4eRw'">
         <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 4942541..8d78a80 100644
--- a/components/ui/Forms/Newsletter.vue
+++ b/components/ui/Forms/Newsletter.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/uNd9oPxGhL'">
         <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 a6f02ef..f877d09 100644
--- a/components/ui/Forms/Search.vue
+++ b/components/ui/Forms/Search.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/7e7pEEHwAY'">
         <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 422df11..31af2a8 100644
--- a/components/ui/Forms/Simple.vue
+++ b/components/ui/Forms/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/oCePm5Vaed'">
         <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 c64f253..41e5d1b 100644
--- a/components/ui/Forms/SimpleNewsletter.vue
+++ b/components/ui/Forms/SimpleNewsletter.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/Cqk9UrM5RN'">
         <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/ECommerce.vue b/components/ui/Heros/ECommerce.vue
index 590841a..7e79403 100644
--- a/components/ui/Heros/ECommerce.vue
+++ b/components/ui/Heros/ECommerce.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/4U0yr9LqwS'">
         <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 f617238..2d281c8 100644
--- a/components/ui/Heros/WithBGImage.vue
+++ b/components/ui/Heros/WithBGImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/z4Od3xIvRD'">
         <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 0b02e69..0a51e21 100644
--- a/components/ui/Heros/WithImage.vue
+++ b/components/ui/Heros/WithImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/wIjcBsgZLl?file=config'">
         <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 22b22d6..fe97652 100644
--- a/components/ui/Heros/WithNewsletterForm.vue
+++ b/components/ui/Heros/WithNewsletterForm.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/qKJnbGgN17'">
         <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 d9ab99e..dd3b5a8 100644
--- a/components/ui/Heros/WithPattern.vue
+++ b/components/ui/Heros/WithPattern.vue
@@ -1,5 +1,5 @@
 <template>
-     <view-component :name="name" :code="code">
+     <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/rHZIWEbLtQ'">
         <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 373daa9..a91c725 100644
--- a/components/ui/Heros/WithSideImage.vue
+++ b/components/ui/Heros/WithSideImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/rRHpjTrb6z'">
         <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 c08e8fb..3297bd0 100644
--- a/components/ui/Heros/WithSlide.vue
+++ b/components/ui/Heros/WithSlide.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/eufp9MSHGo'">
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
                 <nav class="bg-white dark:bg-gray-800">
diff --git a/components/ui/Navbars/ECommerce.vue b/components/ui/Navbars/ECommerce.vue
index 2e86fef..9a5d1aa 100644
--- a/components/ui/Navbars/ECommerce.vue
+++ b/components/ui/Navbars/ECommerce.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/FaNjw7K9Cm'">
         <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 baeae41..419378b 100644
--- a/components/ui/Navbars/Simple.vue
+++ b/components/ui/Navbars/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/awf4Dirl8O'">
         <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 e18c325..9e7f007 100644
--- a/components/ui/Navbars/WithAvatar.vue
+++ b/components/ui/Navbars/WithAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/MDa1Xu1LAL'">
         <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 6d4c3b6..17ad4ba 100644
--- a/components/ui/Navbars/WithCategories.vue
+++ b/components/ui/Navbars/WithCategories.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/hhBBY96OMj'">
         <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 e327357..1af6787 100644
--- a/components/ui/Navbars/WithSearch.vue
+++ b/components/ui/Navbars/WithSearch.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/cAQwvOmYXP'">
         <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/WithSocailMediaLinks.vue b/components/ui/Navbars/WithSocailMediaLinks.vue
index 177b141..2ab60e0 100644
--- a/components/ui/Navbars/WithSocailMediaLinks.vue
+++ b/components/ui/Navbars/WithSocailMediaLinks.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/V3iK65Oj1V'">
         <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 9100496..b64da0e 100644
--- a/components/ui/Pagination/Simple.vue
+++ b/components/ui/Pagination/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/SVPNBUEinZ'">
         <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 0c10e48..11a63c2 100644
--- a/components/ui/Pricing/Popular.vue
+++ b/components/ui/Pricing/Popular.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/tBMgKR6dDn'">
         <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 dcc609c..c623981 100644
--- a/components/ui/Pricing/Simple.vue
+++ b/components/ui/Pricing/Simple.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/DLbvdzHFBL'">
         <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 20bdbe2..6457b14 100644
--- a/components/ui/Pricing/WithNavigation.vue
+++ b/components/ui/Pricing/WithNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/WFBk43I8yF'">
         <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 bb72b4b..5b7e441 100644
--- a/components/ui/Sections/AboutMe.vue
+++ b/components/ui/Sections/AboutMe.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/O9IB0nmgLy'">
         <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 938a178..61c9474 100644
--- a/components/ui/Sections/Feature.vue
+++ b/components/ui/Sections/Feature.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/v5uvHJHJ0I'">
         <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 9fa7164..e201d92 100644
--- a/components/ui/Sections/OurTeam.vue
+++ b/components/ui/Sections/OurTeam.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/TDe8Uty1Qy'">
         <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 19c6e7d..1ea3fd9 100644
--- a/components/ui/Sections/ParagraphWithImage.vue
+++ b/components/ui/Sections/ParagraphWithImage.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/TR4lhfvru8'">
         <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/Sidebar/WithAvatar.vue b/components/ui/Sidebar/WithAvatar.vue
index a4cdf42..ac2681c 100644
--- a/components/ui/Sidebar/WithAvatar.vue
+++ b/components/ui/Sidebar/WithAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/xyZQsjkZRq'">
         <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 610042b..b656972 100644
--- a/components/ui/Sidebar/WithSearch.vue
+++ b/components/ui/Sidebar/WithSearch.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
+    <view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/RtdsASpGev'">
         <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 465d1a4..79109d3 100644
--- a/components/utilities/ViewComponent.vue
+++ b/components/utilities/ViewComponent.vue
@@ -2,10 +2,10 @@
     <div class="mb-16">
         <div class="flex flex-col items-center justify-between md:flex-row">
             <div class="flex items-center">
-                <h3 class="text-gray-700 capitalize dark:text-gray-200 md:text-lg">{{ name }}</h3>
+                <h3 class="text-gray-700 capitalize dark:text-gray-200 md:text-lg">{{ name }} </h3>
             </div>
 
-            <div class="mt-4 space-x-4 md:mt-0">
+            <div class="flex items-center mt-4 space-x-4 md:mt-0">
                 <app-button @click="rtl =! rtl" class="p-1 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="Rtl">
                     <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none">
                         <path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
@@ -28,6 +28,12 @@
                     </svg>
                 </app-button>
 
+                <a target="_blank" :href="playUrl" class="block p-1 text-gray-600 bg-gray-200 rounded-md dark:bg-gray-500 dark:text-gray-200 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 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 dark:bg-gray-700 dark:text-gray-200 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 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" />
@@ -65,7 +71,7 @@ import AppButton from "~/components/utilities/AppButton.vue";
 import CodeSnippet from "./CodeSnippet";
 
 export default {
-    props: ['name' , 'code'],
+    props: ['name' , 'code', 'playUrl'],
 
     components: {
         AppButton,