Drop tailwind play

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

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

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

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

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>

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

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

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

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

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>

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>

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

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

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

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>

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

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

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

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

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>

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>

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

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

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

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

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

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

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

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

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

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"

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

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

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

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

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>

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

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

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>

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

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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>

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>

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,