Add components to tailwindcss play

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">

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">

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">

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">

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>

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">

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">

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">

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">

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>

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>

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">

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

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">

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>

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">

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">

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">

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">

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>

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>

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">

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">

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">

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 -->

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 -->

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"

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">

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">

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">

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>

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">

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">

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>

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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>

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">

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>

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>

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,