Remove configration notes and added to components code

components/Main.vue

@@ -11,8 +11,6 @@
                     </div>
                 </div>
             </div>
-
-            <p class="mt-8 text-center text-gray-700 dark:text-gray-300"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/khatabwedaa/352573904a5b2d5ff3598bcd54ce9f04" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline"> configuration</a></p>
         </div>
 
         <div class="flex justify-center mb-10">

components/ui/Heros/WithBGImage.vue

@@ -49,6 +49,17 @@
                 name: 'With Background Image',
                 isOpen: false,
                 code: `
+        <!-- Add this to your tailwind.config.js -->
+        module.exports = {
+            theme: {
+                extend: {
+                    spacing: {
+                        128: '32rem',
+                    },
+                },
+            },
+        }
+        
         <header>
             <nav class="bg-white shadow dark:bg-gray-800">
                 <div class="container px-6 py-4 mx-auto">

components/ui/Heros/WithImage.vue

@@ -108,6 +108,17 @@
                 name: 'With Image',
                 isOpen: false,
                 code: `
+        <!-- Add this to your tailwind.config.js -->
+        module.exports = {
+            theme: {
+                extend: {
+                    spacing: {
+                        128: '32rem',
+                    },
+                },
+            },
+        }
+
         <header class="bg-white dark:bg-gray-800">
             <nav class="border-b dark:border-gray-700">
                 <div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">

components/ui/Heros/WithPattern.vue

@@ -58,6 +58,17 @@
             return {
                 name: 'With Pattern',
                 code: `
+        <!-- Add this to your tailwind.config.js -->
+        module.exports = {
+            theme: {
+                extend: {
+                    spacing: {
+                        128: '32rem',
+                    },
+                },
+            },
+        }
+
         <!-- Require css -->
         <style>
         .pattern {

components/ui/Heros/WithSideImage.vue

@@ -60,6 +60,17 @@
                 name: 'With Side Image',
                 isOpen: false,
                 code: `
+        <!-- Add this to your tailwind.config.js -->
+        module.exports = {
+            theme: {
+                extend: {
+                    spacing: {
+                        128: '32rem',
+                    },
+                },
+            },
+        }
+
         <header class="bg-white dark:bg-gray-800">
             <nav class="px-6 py-4 shadow">
                 <div class="items-center justify-between md:flex">