From 4451ddd36d3f21adfd9c0630209debd787f7afda Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sun, 7 Feb 2021 18:00:08 +0200
Subject: [PATCH] Sort classes with headwind

---
 src/App.vue                                   | 10 ++--
 src/components/Header.vue                     | 30 ++++++------
 src/components/Main.vue                       | 10 ++--
 src/components/ui/Alerts/ErrorPop.vue         | 24 +++++-----
 src/components/ui/Alerts/InfoPop.vue          | 24 +++++-----
 src/components/ui/Alerts/NotificationPop.vue  |  8 ++--
 src/components/ui/Alerts/SuccessPop.vue       | 24 +++++-----
 src/components/ui/Alerts/WarningPop.vue       | 24 +++++-----
 src/components/ui/Cards/ArticleWithImage.vue  | 32 ++++++-------
 .../ui/Cards/ArticleWithSMIcons.vue           | 44 ++++++++---------
 src/components/ui/Cards/Testimonial.vue       | 18 +++----
 src/components/ui/Cards/User.vue              | 12 ++---
 src/components/ui/Cards/UserWithDetails.vue   | 32 ++++++-------
 src/components/ui/Footers/Simple.vue          | 16 +++----
 src/components/ui/Footers/WithDetails.vue     | 48 +++++++++----------
 src/components/ui/Forms/Search.vue            | 28 +++++------
 src/components/ui/Navbars/ECommerce.vue       | 48 +++++++++----------
 src/components/ui/Sections/AboutMe.vue        | 44 ++++++++---------
 src/components/ui/Sections/Feature.vue        | 32 ++++++-------
 src/components/ui/Sections/OurTeam.vue        | 44 ++++++++---------
 src/components/utilities/CodeSnippet.vue      |  8 ++--
 src/components/utilities/ViewComponent.vue    | 32 ++++++-------
 22 files changed, 296 insertions(+), 296 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a5fc435..20de5d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,18 +5,18 @@
             <main-component></main-component>
 
             <back-to-top visibleoffset="800">
-                <app-button class="bg-gray-800 hover:bg-gray-900 dark:hover:bg-gray-700 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
-                    <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+                <app-button class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
+                    <svg class="w-6 h-6" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
                     </svg>
                 </app-button>
             </back-to-top>
 
-            <app-button @click="darkMode = !darkMode" class="bg-gray-800 hover:bg-gray-900 dark:hover:bg-gray-700 text-white fixed bottom-0 right-0 my-24 mx-10 p-2 rounded-md focus:outline-none" aria-label="Color Mode">
-                <svg v-if="darkMode" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <app-button @click="darkMode = !darkMode" class="fixed bottom-0 right-0 p-2 mx-10 my-24 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Color Mode">
+                <svg v-if="darkMode" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
                 </svg>
-                <svg v-if="!darkMode" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <svg v-if="!darkMode" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
                 </svg>
             </app-button>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index a0817ab..d8071e2 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,17 +1,17 @@
 <template>
-    <header class="pattern bg-gray-900 border-b-4 border-blue-500">
+    <header class="bg-gray-900 border-b-4 border-blue-500 pattern">
         <nav>
-            <div class="container mx-auto px-6 py-4">
-                <div class="flex justify-between items-center">
-                    <a href="/" class="text-white text-xl font-bold md:text-2xl inline-flex items-center hover:text-blue-400">
-                        <img class="h-10 w-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> Meraki <span class="text-blue-400">UI</span>
+            <div class="container px-6 py-4 mx-auto">
+                <div class="flex items-center justify-between">
+                    <a href="/" class="inline-flex items-center text-xl font-bold text-white md:text-2xl hover:text-blue-400">
+                        <img class="w-10 h-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> Meraki <span class="text-blue-400">UI</span>
                     </a>
 
                     <div class="flex items-center">
-                        <a :href="SHARE_LINK" class="text-white font-medium hover:underline">Share on twitter</a>
+                        <a :href="SHARE_LINK" class="font-medium text-white hover:underline">Share on twitter</a>
 
                         <a class="ml-4 text-white hover:text-blue-500" href="https://github.com/bakateam/merakiui" target="_blink">
-                            <svg class="h-6 w-6 fill-current" viewBox="0 0 30 30">
+                            <svg class="w-6 h-6 fill-current" viewBox="0 0 30 30">
                                 <path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z"/>
                             </svg>
                         </a>
@@ -20,32 +20,32 @@
             </div>
         </nav>
 
-        <div class="container mx-auto px-6 py-8 md:py-0">
+        <div class="container px-6 py-8 mx-auto md:py-0">
             <div class="md:flex">
                 <div class="flex items-center w-full md:w-1/2 md:h-128">
                     <div class="max-w-lg text-white">
                         <div class="text-xs font-light">Simple UI Starter</div>
 
-                        <h1 class="font-semibold text-2xl mt-3 text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
+                        <h1 class="mt-3 text-2xl font-semibold text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
                         
                         <p class="mt-3 text-gray-300">
-                            Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">Tailwindcss</a> 
+                            Beautiful <a href="https://tailwindcss.com" class="font-normal text-blue-400 hover:underline">Tailwindcss</a> 
                             components that support RTL languages & fully responsive based on Flexbox & CSS Grid. Built by 
                             <a href="https://twitter.com/khatabwedaa" class="text-blue-400 hover:underline">@khatabwedaa</a> &
                             <a href="https://twitter.com/miaababikir" class="text-blue-400 hover:underline">@miaababikir</a>
                         </p>
 
                         <div class="flex flex-wrap items-center mt-4">
-                            <a class="flex text-white hover:underline cursor-pointer">
-                                <svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <a class="flex text-white cursor-pointer hover:underline">
+                                <svg class="w-5 h-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                     <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
                                 </svg>
 
                                 <p class="mx-2 text-sm">{{ components_count }} Components</p>
                             </a>
 
-                            <a class="flex text-white hover:underline ml-2" href="https://github.com/merakiui/merakiui/blob/master/LICENSE">
-                                <svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <a class="flex ml-2 text-white hover:underline" href="https://github.com/merakiui/merakiui/blob/master/LICENSE">
+                                <svg class="w-5 h-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                     <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z" clip-rule="evenodd" />
                                 </svg>
 
@@ -56,7 +56,7 @@
                     </div>
                 </div>
                 
-                <div class="mt-6 w-full md:w-1/2 flex justify-center md:justify-end items-center md:mt-0">
+                <div class="flex items-center justify-center w-full mt-6 md:w-1/2 md:justify-end md:mt-0">
                     <div class="w-full max-w-md">
                         <img src="../assets/svg/Responsive-bro.svg" alt="moon">
                     </div>
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 7c27f19..03efacf 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -1,18 +1,18 @@
 <template>
-    <div class="container mx-auto px-6 pb-12">
+    <div class="container px-6 pb-12 mx-auto">
         <div class="py-16 text-center">
-            <h1 class="text-xl md:text-3xl text-gray-800 dark:text-white font-medium">Discover new components. Build amazing things 🔥</h1>
+            <h1 class="text-xl font-medium text-gray-800 md:text-3xl dark:text-white">Discover new components. Build amazing things 🔥</h1>
             <div class="max-w-2xl mx-auto">
                 <div class="flex items-center justify-center mt-5 ">
                     <div class="mt-2 md:mt-0">
                         <span v-for="category in categories" :key="category.name">
-                            <app-button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-200 rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200 dark:bg-gray-600 dark:text-gray-200' : 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'">{{ category.name }}</app-button>
+                            <app-button @click="searchText = category.name" class="px-3 py-1 mt-2 ml-2 text-sm rounded cursor-pointer hover:bg-gray-700 hover:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-200 focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200 dark:bg-gray-600 dark:text-gray-200' : 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'">{{ category.name }}</app-button>
                         </span> 
                     </div>
                 </div>
             </div>
 
-            <p class="mt-8 text-gray-700 dark:text-gray-300 text-center"> 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>
+            <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>
 
             <a href="https://a.paddle.com/v2/click/37973/124351?link=3167" class="block max-w-5xl mx-auto mt-8 overflow-hidden rounded-md">
                 <img class="hidden md:block" src="../assets/tails.jpg" alt="devdojo tails">
@@ -22,7 +22,7 @@
 
         <div class="w-full max-w-6xl mx-auto">
             <div class="mb-16" v-for="category in list" :key="category.name">
-                <h1 class="text-2xl text-gray-800 dark:text-white font-semibold mb-6 capitalize" v-text="category.name"></h1>
+                <h1 class="mb-6 text-2xl font-semibold text-gray-800 capitalize dark:text-white" v-text="category.name"></h1>
 
                 <div v-for="component in category.components" :key="component.name" :name="component.name">
                     <component :is="category.name + component.name"></component>
diff --git a/src/components/ui/Alerts/ErrorPop.vue b/src/components/ui/Alerts/ErrorPop.vue
index 582c614..0f2d5fa 100644
--- a/src/components/ui/Alerts/ErrorPop.vue
+++ b/src/components/ui/Alerts/ErrorPop.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
-                <div class="flex justify-center items-center w-12 bg-red-500">
-                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+            <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">
+                    <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                         <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
                     </svg>
                 </div>
                 
-                <div class="-mx-3 py-2 px-4">
+                <div class="px-4 py-2 -mx-3">
                     <div class="mx-3">
-                        <span class="text-red-500 dark:text-red-400 font-semibold">Error</span>
-                        <p class="text-gray-600 dark:text-gray-200 text-sm">Your email is already used!</p>
+                        <span class="font-semibold text-red-500 dark:text-red-400">Error</span>
+                        <p class="text-sm text-gray-600 dark:text-gray-200">Your email is already used!</p>
                     </div>
                 </div>
             </div>
@@ -25,17 +25,17 @@
             return {
                 name: 'Error Pop',
                 code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-red-500">
-                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+        <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">
+                <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                     <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
                 </svg>
             </div>
             
-            <div class="-mx-3 py-2 px-4">
+            <div class="px-4 py-2 -mx-3">
                 <div class="mx-3">
-                    <span class="text-red-500 dark:text-red-400 font-semibold">Error</span>
-                    <p class="text-gray-600 dark:text-gray-200 text-sm">Your email is already used!</p>
+                    <span class="font-semibold text-red-500 dark:text-red-400">Error</span>
+                    <p class="text-sm text-gray-600 dark:text-gray-200">Your email is already used!</p>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Alerts/InfoPop.vue b/src/components/ui/Alerts/InfoPop.vue
index b0def8b..464200f 100644
--- a/src/components/ui/Alerts/InfoPop.vue
+++ b/src/components/ui/Alerts/InfoPop.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
-                <div class="flex justify-center items-center w-12 bg-blue-500">
-                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+            <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">
+                    <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                         <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
                     </svg>
                 </div>
                 
-                <div class="-mx-3 py-2 px-4">
+                <div class="px-4 py-2 -mx-3">
                     <div class="mx-3">
-                        <span class="text-blue-500 dark:text-blue-400 font-semibold">Info</span>
-                        <p class="text-gray-600 dark:text-gray-200 text-sm">This channel archived by the owner!</p>
+                        <span class="font-semibold text-blue-500 dark:text-blue-400">Info</span>
+                        <p class="text-sm text-gray-600 dark:text-gray-200">This channel archived by the owner!</p>
                     </div>
                 </div>
             </div>
@@ -25,17 +25,17 @@
             return {
                 name: 'Info Pop',
                 code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-blue-500">
-                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+        <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">
+                <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                     <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
                 </svg>
             </div>
             
-            <div class="-mx-3 py-2 px-4">
+            <div class="px-4 py-2 -mx-3">
                 <div class="mx-3">
-                    <span class="text-blue-500 dark:text-blue-400 font-semibold">Info</span>
-                    <p class="text-gray-600 dark:text-gray-200 text-sm">This channel archived by the owner!</p>
+                    <span class="font-semibold text-blue-500 dark:text-blue-400">Info</span>
+                    <p class="text-sm text-gray-600 dark:text-gray-200">This channel archived by the owner!</p>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Alerts/NotificationPop.vue b/src/components/ui/Alerts/NotificationPop.vue
index 4bc62a8..7ff21ef 100644
--- a/src/components/ui/Alerts/NotificationPop.vue
+++ b/src/components/ui/Alerts/NotificationPop.vue
@@ -1,11 +1,11 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden mx-auto">
+            <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>
                 
                 <div class="flex items-center px-2 py-3">
-                    <img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
+                    <img class="object-cover w-10 h-10 rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
                     
                     <div class="mx-3">
                         <p class="text-gray-600 dark:text-gray-200">Sara has replied on the <a class="text-blue-500 dark:text-blue-300 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
@@ -22,11 +22,11 @@
             return {
                 name: 'Notification Pop',
                 code: `
-        <div class="flex max-w-sm w-full bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden mx-auto">
+        <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>
 
             <div class="flex items-center px-2 py-3">
-                <img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
+                <img class="object-cover w-10 h-10 rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
                 
                 <div class="mx-3">
                     <p class="text-gray-600 dark:text-gray-200">Sara has replied on the <a class="text-blue-500 dark:text-blue-300 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
diff --git a/src/components/ui/Alerts/SuccessPop.vue b/src/components/ui/Alerts/SuccessPop.vue
index bba8be0..8e236ec 100644
--- a/src/components/ui/Alerts/SuccessPop.vue
+++ b/src/components/ui/Alerts/SuccessPop.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
-                <div class="flex justify-center items-center w-12 bg-green-500">
-                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+            <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">
+                    <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                         <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
                     </svg>
                 </div>
                 
-                <div class="-mx-3 py-2 px-4">
+                <div class="px-4 py-2 -mx-3">
                     <div class="mx-3">
-                        <span class="text-green-500 dark:text-green-400 font-semibold">Success</span>
-                        <p class="text-gray-600 dark:text-gray-200 text-sm">Your account was registered!</p>
+                        <span class="font-semibold text-green-500 dark:text-green-400">Success</span>
+                        <p class="text-sm text-gray-600 dark:text-gray-200">Your account was registered!</p>
                     </div>
                 </div>
             </div>
@@ -25,17 +25,17 @@
             return {
                 name: 'Success Pop',
                 code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-green-500">
-                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+        <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">
+                <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                     <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
                 </svg>
             </div>
             
-            <div class="-mx-3 py-2 px-4">
+            <div class="px-4 py-2 -mx-3">
                 <div class="mx-3">
-                    <span class="text-green-500 dark:text-green-400 font-semibold">Success</span>
-                    <p class="text-gray-600 dark:text-gray-200 text-sm">Your account was registered!</p>
+                    <span class="font-semibold text-green-500 dark:text-green-400">Success</span>
+                    <p class="text-sm text-gray-600 dark:text-gray-200">Your account was registered!</p>
                 </div>
             </div>
         </div>
diff --git a/src/components/ui/Alerts/WarningPop.vue b/src/components/ui/Alerts/WarningPop.vue
index 0a0211c..88b0064 100644
--- a/src/components/ui/Alerts/WarningPop.vue
+++ b/src/components/ui/Alerts/WarningPop.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
-                <div class="flex justify-center items-center w-12 bg-yellow-400">
-                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+            <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">
+                    <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                         <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
                     </svg>
                 </div>
                 
-                <div class="-mx-3 py-2 px-4">
+                <div class="px-4 py-2 -mx-3">
                     <div class="mx-3">
-                        <span class="text-yellow-400 dark:text-yellow-300 font-semibold">Warning</span>
-                        <p class="text-gray-600 dark:text-gray-200 text-sm">Your image size is too large!</p>
+                        <span class="font-semibold text-yellow-400 dark:text-yellow-300">Warning</span>
+                        <p class="text-sm text-gray-600 dark:text-gray-200">Your image size is too large!</p>
                     </div>
                 </div>
             </div>
@@ -25,17 +25,17 @@
             return {
                 name: 'Warning Pop',
                 code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-yellow-400">
-                 <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+        <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">
+                 <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                     <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
                 </svg>
             </div>
             
-            <div class="-mx-3 py-2 px-4">
+            <div class="px-4 py-2 -mx-3">
                 <div class="mx-3">
-                    <span class="text-yellow-400 dark:text-yellow-300 font-semibold">Warning</span>
-                    <p class="text-gray-600 dark:text-gray-200 text-sm">Your image size is too large!</p>
+                    <span class="font-semibold text-yellow-400 dark:text-yellow-300">Warning</span>
+                    <p class="text-sm text-gray-600 dark:text-gray-200">Your image size is too large!</p>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Cards/ArticleWithImage.vue b/src/components/ui/Cards/ArticleWithImage.vue
index e677562..27e11fe 100644
--- a/src/components/ui/Cards/ArticleWithImage.vue
+++ b/src/components/ui/Cards/ArticleWithImage.vue
@@ -1,23 +1,23 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 overflow-hidden shadow-md rounded-lg">
-                <img class="w-full h-64 object-cover" 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">
+            <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">
 
                 <div class="p-6">
                     <div>
-                        <span class="text-blue-600 dark:text-blue-400 text-xs font-medium uppercase">Product</span>
-                        <a href="#" class="block text-gray-800 dark:text-white font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
-                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
+                        <span class="text-xs font-medium text-blue-600 uppercase dark:text-blue-400">Product</span>
+                        <a href="#" class="block mt-2 text-2xl font-semibold text-gray-800 dark:text-white hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
                     </div>
 
                     <div class="mt-4">
                         <div class="flex items-center">
                             <div class="flex items-center">
-                                <img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
-                                <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 font-semibold">Jone Doe</a>
+                                <img class="object-cover h-10 rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
+                                <a href="#" class="mx-2 font-semibold text-gray-700 dark:text-gray-200">Jone Doe</a>
                             </div>
-                            <span class="mx-1 text-gray-600 dark:text-gray-300 text-xs">21 SEP 2015</span>
+                            <span class="mx-1 text-xs text-gray-600 dark:text-gray-300">21 SEP 2015</span>
                         </div>
                     </div>
                 </div>
@@ -32,23 +32,23 @@
             return {
                 name: 'Article With Image',
                 code: `
-        <div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 overflow-hidden shadow-md rounded-lg">
-            <img class="w-full h-64 object-cover" 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">
+        <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">
 
             <div class="p-6">
                 <div>
-                    <span class="text-blue-600 dark:text-blue-400 text-xs font-medium uppercase">Product</span>
-                    <a href="#" class="block text-gray-800 dark:text-white font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
-                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
+                    <span class="text-xs font-medium text-blue-600 uppercase dark:text-blue-400">Product</span>
+                    <a href="#" class="block mt-2 text-2xl font-semibold text-gray-800 dark:text-white hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
+                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
                 </div>
 
                 <div class="mt-4">
                     <div class="flex items-center">
                         <div class="flex items-center">
-                            <img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
-                            <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 font-semibold">Jone Doe</a>
+                            <img class="object-cover h-10 rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
+                            <a href="#" class="mx-2 font-semibold text-gray-700 dark:text-gray-200">Jone Doe</a>
                         </div>
-                        <span class="mx-1 text-gray-600 dark:text-gray-300 text-xs">21 SEP 2015</span>
+                        <span class="mx-1 text-xs text-gray-600 dark:text-gray-300">21 SEP 2015</span>
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Cards/ArticleWithSMIcons.vue b/src/components/ui/Cards/ArticleWithSMIcons.vue
index bc494e5..5f7509d 100644
--- a/src/components/ui/Cards/ArticleWithSMIcons.vue
+++ b/src/components/ui/Cards/ArticleWithSMIcons.vue
@@ -1,34 +1,34 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-sm mx-auto w-full px-4 py-3 bg-white dark:bg-gray-800 shadow-md rounded-md">
-                <div class="flex justify-between items-center">
+            <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">
                     <span class="text-sm font-light text-gray-800 dark:text-gray-400">Courses and MOOCs</span>
-                    <span class="bg-indigo-200 dark:bg-indigo-300 text-indigo-800 dark:text-indigo-900 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
+                    <span class="px-3 py-1 text-xs text-indigo-800 uppercase bg-indigo-200 rounded-full dark:bg-indigo-300 dark:text-indigo-900">psychology</span>
                 </div>
 
                 <div>
-                    <h1 class="text-lg font-semibold text-gray-800 dark:text-white mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
-                    <p class="text-gray-600 dark:text-gray-300 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
+                    <h1 class="mt-2 text-lg font-semibold text-gray-800 dark:text-white">AP® Psychology - Course 5: Health and Behavior</h1>
+                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
                 </div>
 
                 <div>
                     <div class="flex items-center mt-2 text-gray-700 dark:text-gray-200">
                         <span>Visit on:</span>
-                        <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">edx.org</a>
+                        <a class="mx-2 text-blue-600 cursor-pointer dark:text-blue-400 hover:underline">edx.org</a>
                         <span>or</span>
-                        <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">classcentral.com</a>
+                        <a class="mx-2 text-blue-600 cursor-pointer dark:text-blue-400 hover:underline">classcentral.com</a>
                     </div>
 
                     <div class="flex items-center justify-center mt-4">
-                        <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
-                            <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+                        <a class="mr-2 text-gray-800 cursor-pointer dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+                            <svg class="w-5 h-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                                 <path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
                             </svg>
                         </a>
 
-                        <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
-                            <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="mr-2 text-gray-800 cursor-pointer dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+                            <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/>
                                 <path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/>
                                 <path d="M14.8284 10.5857C15.2189 10.1952 15.2189 9.56199 14.8284 9.17147C14.4379 8.78094 13.8047 8.78094 13.4142 9.17147L9.17154 13.4141C8.78101 13.8046 8.78101 14.4378 9.17154 14.8283C9.56206 15.2188 10.1952 15.2188 10.5857 14.8283L14.8284 10.5857Z"/>
@@ -47,34 +47,34 @@
             return {
                 name: 'Article With SM icons',
                 code: `
-        <div class="max-w-sm mx-auto w-full px-4 py-3 bg-white dark:bg-gray-800 shadow-md rounded-md">
-            <div class="flex justify-between items-center">
+        <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">
                 <span class="text-sm font-light text-gray-800 dark:text-gray-400">Courses and MOOCs</span>
-                <span class="bg-indigo-200 dark:bg-indigo-300 text-indigo-800 dark:text-indigo-900 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
+                <span class="px-3 py-1 text-xs text-indigo-800 uppercase bg-indigo-200 rounded-full dark:bg-indigo-300 dark:text-indigo-900">psychology</span>
             </div>
 
             <div>
-                <h1 class="text-lg font-semibold text-gray-800 dark:text-white mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
-                <p class="text-gray-600 dark:text-gray-300 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
+                <h1 class="mt-2 text-lg font-semibold text-gray-800 dark:text-white">AP® Psychology - Course 5: Health and Behavior</h1>
+                <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
             </div>
 
             <div>
                 <div class="flex items-center mt-2 text-gray-700 dark:text-gray-200">
                     <span>Visit on:</span>
-                    <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">edx.org</a>
+                    <a class="mx-2 text-blue-600 cursor-pointer dark:text-blue-400 hover:underline">edx.org</a>
                     <span>or</span>
-                    <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">classcentral.com</a>
+                    <a class="mx-2 text-blue-600 cursor-pointer dark:text-blue-400 hover:underline">classcentral.com</a>
                 </div>
 
                 <div class="flex items-center justify-center mt-4">
-                    <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
-                        <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+                    <a class="mr-2 text-gray-800 cursor-pointer dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+                        <svg class="w-5 h-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                             <path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
                         </svg>
                     </a>
 
-                    <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
-                        <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="mr-2 text-gray-800 cursor-pointer dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+                        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/>
                             <path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/>
                             <path d="M14.8284 10.5857C15.2189 10.1952 15.2189 9.56199 14.8284 9.17147C14.4379 8.78094 13.8047 8.78094 13.4142 9.17147L9.17154 13.4141C8.78101 13.8046 8.78101 14.4378 9.17154 14.8283C9.56206 15.2188 10.1952 15.2188 10.5857 14.8283L14.8284 10.5857Z"/>
diff --git a/src/components/ui/Cards/Testimonial.vue b/src/components/ui/Cards/Testimonial.vue
index 368b146..1ec08cf 100644
--- a/src/components/ui/Cards/Testimonial.vue
+++ b/src/components/ui/Cards/Testimonial.vue
@@ -1,12 +1,12 @@
 <template>
     <view-component :name="name" :code="code">
-        <div class="px-3 pb-6 pt-16" slot="component">
-            <div class="max-w-md mx-auto py-4 px-8 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
-                <div class="flex justify-center md:justify-end -mt-16">
-                    <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500 dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
+        <div class="px-3 pt-16 pb-6" slot="component">
+            <div class="max-w-md px-8 py-4 mx-auto bg-white rounded-lg shadow-lg dark:bg-gray-800">
+                <div class="flex justify-center -mt-16 md:justify-end">
+                    <img class="object-cover w-20 h-20 border-2 border-indigo-500 rounded-full dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
                 </div>
 
-                <h2 class="text-gray-800 dark:text-white text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
+                <h2 class="mt-2 text-2xl font-semibold text-gray-800 dark:text-white md:mt-0 md:text-3xl">Design Tools</h2>
 
                 <p class="mt-2 text-gray-600 dark:text-gray-200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
                 
@@ -24,12 +24,12 @@
             return {
                 name: 'Testimonial',
                 code: `
-        <div class="max-w-md mx-auto py-4 px-8 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
-            <div class="flex justify-center md:justify-end -mt-16">
-                <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500 dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
+        <div class="max-w-md px-8 py-4 mx-auto bg-white rounded-lg shadow-lg dark:bg-gray-800">
+            <div class="flex justify-center -mt-16 md:justify-end">
+                <img class="object-cover w-20 h-20 border-2 border-indigo-500 rounded-full dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
             </div>
 
-            <h2 class="text-gray-800 dark:text-white text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
+            <h2 class="mt-2 text-2xl font-semibold text-gray-800 dark:text-white md:mt-0 md:text-3xl">Design Tools</h2>
 
             <p class="mt-2 text-gray-600 dark:text-gray-200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
             
diff --git a/src/components/ui/Cards/User.vue b/src/components/ui/Cards/User.vue
index d0a091b..963f8a2 100644
--- a/src/components/ui/Cards/User.vue
+++ b/src/components/ui/Cards/User.vue
@@ -1,11 +1,11 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-xs bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden mx-auto">
-                <img class="w-full h-56 object-cover" 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">
+            <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">
                 
                 <div class="py-5 text-center">
-                    <a href="#" class="block text-2xl text-gray-800 dark:text-white font-bold">John Doe</a>
+                    <a href="#" class="block text-2xl font-bold text-gray-800 dark:text-white">John Doe</a>
                     <span class="text-sm text-gray-700 dark:text-gray-200">Software Engineer</span>
                 </div>
             </div>
@@ -19,11 +19,11 @@
             return {
                 name: 'User',
                 code: `
-        <div class="max-w-xs bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden mx-auto">
-            <img class="w-full h-56 object-cover" 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">
+        <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">
             
             <div class="py-5 text-center">
-                <a href="#" class="block text-2xl text-gray-800 dark:text-white font-bold">John Doe</a>
+                <a href="#" class="block text-2xl font-bold text-gray-800 dark:text-white">John Doe</a>
                 <span class="text-sm text-gray-700 dark:text-gray-200">Software Engineer</span>
             </div>
         </div>`
diff --git a/src/components/ui/Cards/UserWithDetails.vue b/src/components/ui/Cards/UserWithDetails.vue
index ce4eb79..181db1b 100644
--- a/src/components/ui/Cards/UserWithDetails.vue
+++ b/src/components/ui/Cards/UserWithDetails.vue
@@ -1,24 +1,24 @@
 <template>
    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
-                <img class="w-full h-56 object-cover object-center" 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">
+            <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">
                 
                 <div class="flex items-center px-6 py-3 bg-gray-900">
-                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z"/>
                     </svg>
 
-                    <h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
+                    <h1 class="mx-3 text-lg font-semibold text-white">Focusing</h1>
                 </div>
 
-                <div class="py-4 px-6">
+                <div class="px-6 py-4">
                     <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Patterson johnson</h1>
 
                     <p class="py-2 text-gray-700 dark:text-gray-400">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
                    
                     <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
-                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
                         </svg>
 
@@ -26,7 +26,7 @@
                     </div>
 
                     <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
-                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
                         </svg>
 
@@ -34,7 +34,7 @@
                     </div>
 
                     <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
-                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
                         </svg>
 
@@ -52,24 +52,24 @@ export default {
         return {
             name: 'User With Details',
             code: `
-        <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
-            <img class="w-full h-56 object-cover object-center" 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">
+        <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">
             
             <div class="flex items-center px-6 py-3 bg-gray-900">
-                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z"/>
                 </svg>
 
-                <h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
+                <h1 class="mx-3 text-lg font-semibold text-white">Focusing</h1>
             </div>
 
-            <div class="py-4 px-6">
+            <div class="px-6 py-4">
                 <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Patterson johnson</h1>
 
                 <p class="py-2 text-gray-700 dark:text-gray-400">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
                 
                 <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
-                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
                     </svg>
 
@@ -77,7 +77,7 @@ export default {
                 </div>
 
                 <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
-                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
                     </svg>
 
@@ -85,7 +85,7 @@ export default {
                 </div>
 
                 <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
-                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
                     </svg>
                     
diff --git a/src/components/ui/Footers/Simple.vue b/src/components/ui/Footers/Simple.vue
index bee662f..2f1a013 100644
--- a/src/components/ui/Footers/Simple.vue
+++ b/src/components/ui/Footers/Simple.vue
@@ -1,26 +1,26 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <footer class="flex flex-col justify-between items-center px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
+            <footer class="flex flex-col items-center justify-between px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
                 <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
                 
                 <p class="py-2 text-gray-800 dark:text-white sm:py-0">All rights reserved</p>
 
                 <div class="flex -mx-2">
                     <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Linkden">
-                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                        <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                             <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
                         </svg>
                     </a>
 
                     <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Facebook">
-                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                        <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                             <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
                         </svg>
                     </a>
 
                     <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Twitter">
-                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                        <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                             <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
                         </svg>
                     </a>
@@ -36,26 +36,26 @@
             return {
                 name: 'Simple',
                 code: `
-        <footer class="flex flex-col justify-between items-center px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
+        <footer class="flex flex-col items-center justify-between px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
             <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
             
             <p class="py-2 text-gray-800 dark:text-white sm:py-0">All rights reserved</p>
 
             <div class="flex -mx-2">
                 <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Linkden">
-                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                    <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                         <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
                     </svg>
                 </a>
 
                 <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Facebook">
-                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                    <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                         <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
                     </svg>
                 </a>
 
                 <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Twitter">
-                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                    <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                         <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
                     </svg>
                 </a>
diff --git a/src/components/ui/Footers/WithDetails.vue b/src/components/ui/Footers/WithDetails.vue
index 178e0fc..308bec3 100644
--- a/src/components/ui/Footers/WithDetails.vue
+++ b/src/components/ui/Footers/WithDetails.vue
@@ -2,31 +2,31 @@
      <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <footer class="bg-white dark:bg-gray-800">
-                <div class="container mx-auto px-6 py-4">
+                <div class="container px-6 py-4 mx-auto">
                     <div class="lg:flex">
-                        <div class="w-full lg:w-2/5 -mx-6">
+                        <div class="w-full -mx-6 lg:w-2/5">
                             <div class="px-6">
                                 <div>
                                     <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
                                 </div>
                                 
-                                <p class="mt-2 text-gray-500 dark:text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
+                                <p class="max-w-md mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
                                 
                                 <div class="flex mt-4 -mx-2">
                                     <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Linkden">
-                                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                        <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                                             <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
                                         </svg>
                                     </a>
 
                                     <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Facebook">
-                                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                        <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                                             <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
                                         </svg>
                                     </a>
 
                                     <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Twitter">
-                                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                        <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                                             <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
                                         </svg>
                                     </a>
@@ -35,30 +35,30 @@
                         </div>
 
                         <div class="mt-6 lg:mt-0 lg:flex-1">
-                            <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
+                            <div class="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4">
                                 <div>
-                                    <h3 class="text-gray-700 dark:text-white uppercase">About</h3>
+                                    <h3 class="text-gray-700 uppercase dark:text-white">About</h3>
                                     <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Company</a>
                                     <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">community</a>
                                     <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Careers</a>
                                 </div>
 
                                 <div>
-                                    <h3 class="text-gray-700 dark:text-white uppercase">Blog</h3>
+                                    <h3 class="text-gray-700 uppercase dark:text-white">Blog</h3>
                                     <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Tec</a>
                                     <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Music</a>
                                     <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Videos</a>
                                 </div>
 
                                 <div>
-                                    <h3 class="text-gray-700 dark:text-white uppercase">Products</h3>
+                                    <h3 class="text-gray-700 uppercase dark:text-white">Products</h3>
                                     <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Mega cloud</a>
                                     <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Aperion UI</a>
                                     <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Meraki UI</a>
                                 </div>
 
                                 <div>
-                                    <h3 class="text-gray-700 dark:text-white uppercase">Contact</h3>
+                                    <h3 class="text-gray-700 uppercase dark:text-white">Contact</h3>
                                     <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">+1 526 654 8965</span>
                                     <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">example@email.com</span>
                                 </div>
@@ -66,7 +66,7 @@
                         </div>
                     </div>
 
-                    <hr class="h-px my-6 bg-gray-300 dark:bg-gray-700 border-none">
+                    <hr class="h-px my-6 bg-gray-300 border-none dark:bg-gray-700">
 
                     <div>
                         <p class="text-center text-gray-800 dark:text-white">© Brand 2020 - All rights reserved</p>
@@ -84,31 +84,31 @@
                 name: 'With Details',
                 code: `
         <footer class="bg-white dark:bg-gray-800">
-            <div class="container mx-auto px-6 py-4">
+            <div class="container px-6 py-4 mx-auto">
                 <div class="lg:flex">
-                    <div class="w-full lg:w-2/5 -mx-6">
+                    <div class="w-full -mx-6 lg:w-2/5">
                         <div class="px-6">
                             <div>
                                 <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
                             </div>
                             
-                            <p class="mt-2 text-gray-500 dark:text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
+                            <p class="max-w-md mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
                             
                             <div class="flex mt-4 -mx-2">
                                 <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Linkden">
-                                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                    <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                                         <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
                                     </svg>
                                 </a>
 
                                 <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Facebook">
-                                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                    <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                                         <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
                                     </svg>
                                 </a>
 
                                 <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Twitter">
-                                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                    <svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
                                         <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
                                     </svg>
                                 </a>
@@ -117,30 +117,30 @@
                     </div>
 
                     <div class="mt-6 lg:mt-0 lg:flex-1">
-                        <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
+                        <div class="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4">
                             <div>
-                                <h3 class="text-gray-700 dark:text-white uppercase">About</h3>
+                                <h3 class="text-gray-700 uppercase dark:text-white">About</h3>
                                 <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Company</a>
                                 <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">community</a>
                                 <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Careers</a>
                             </div>
 
                             <div>
-                                <h3 class="text-gray-700 dark:text-white uppercase">Blog</h3>
+                                <h3 class="text-gray-700 uppercase dark:text-white">Blog</h3>
                                 <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Tec</a>
                                 <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Music</a>
                                 <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Videos</a>
                             </div>
 
                             <div>
-                                <h3 class="text-gray-700 dark:text-white uppercase">Products</h3>
+                                <h3 class="text-gray-700 uppercase dark:text-white">Products</h3>
                                 <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Mega cloud</a>
                                 <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Aperion UI</a>
                                 <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Meraki UI</a>
                             </div>
 
                             <div>
-                                <h3 class="text-gray-700 dark:text-white uppercase">Contact</h3>
+                                <h3 class="text-gray-700 uppercase dark:text-white">Contact</h3>
                                 <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">+1 526 654 8965</span>
                                 <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">example@email.com</span>
                             </div>
@@ -148,7 +148,7 @@
                     </div>
                 </div>
 
-                <hr class="h-px my-6 bg-gray-300 dark:bg-gray-700 border-none">
+                <hr class="h-px my-6 bg-gray-300 border-none dark:bg-gray-700">
 
                 <div>
                     <p class="text-center text-gray-800 dark:text-white">© Brand 2020 - All rights reserved</p>
diff --git a/src/components/ui/Forms/Search.vue b/src/components/ui/Forms/Search.vue
index 0246905..a6f02ef 100644
--- a/src/components/ui/Forms/Search.vue
+++ b/src/components/ui/Forms/Search.vue
@@ -1,21 +1,21 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 pt-6 pb-80" slot="component">
-            <section class="max-w-md w-full mx-auto px-5 py-4 relative rounded-md">
+            <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
                 <div class="relative">
-                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                        <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                             <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                         </svg>
                     </span>
 
-                    <input type="text" v-model="keyword" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Type Something">
+                    <input type="text" v-model="keyword" class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Type Something">
                 </div>
 
-                <div v-if="jobsSearch" class="absolute inset-x-0 mt-4 mx-5 px-6 py-3 max-h-72 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-transparent rounded-md">
+                <div v-if="jobsSearch" class="absolute inset-x-0 px-6 py-3 mx-5 mt-4 overflow-y-auto bg-white border border-gray-300 rounded-md max-h-72 dark:bg-gray-800 dark:border-transparent">
                     <a v-for="job in jobsSearch" :key="job.title" href="#" class="block py-1">
-                        <h3 class="text-gray-700 dark:text-gray-100 font-medium hover:underline" v-text="job.title"></h3>
-                        <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm" v-text="job.date"></p>
+                        <h3 class="font-medium text-gray-700 dark:text-gray-100 hover:underline" v-text="job.title"></h3>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400" v-text="job.date"></p>
                     </a>
                 </div>
             </section>
@@ -60,21 +60,21 @@ export default {
                 },
             ],
             code: `
-        <section class="max-w-md w-full mx-auto px-5 py-4 relative rounded-md">
+        <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
             <div class="relative">
-                <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                         <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                     </svg>
                 </span>
 
-                <input type="text" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                <input type="text" class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
             </div>
 
-            <div class="absolute inset-x-0 mt-4 mx-5 px-6 py-3 max-h-72 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-transparent rounded-md">
+            <div class="absolute inset-x-0 px-6 py-3 mx-5 mt-4 overflow-y-auto bg-white border border-gray-300 rounded-md max-h-72 dark:bg-gray-800 dark:border-transparent">
                 <a href="#" class="block py-1">
-                    <h3 class="text-gray-700 dark:text-gray-100 font-medium hover:underline">Software engineer</h3>
-                    <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">02/04/2020</p>
+                    <h3 class="font-medium text-gray-700 dark:text-gray-100 hover:underline">Software engineer</h3>
+                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">02/04/2020</p>
                 </a>
             </div>
         </section>`
diff --git a/src/components/ui/Navbars/ECommerce.vue b/src/components/ui/Navbars/ECommerce.vue
index 9623ae1..e15be63 100644
--- a/src/components/ui/Navbars/ECommerce.vue
+++ b/src/components/ui/Navbars/ECommerce.vue
@@ -1,37 +1,37 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <nav class="bg-white dark:bg-gray-800 shadow">
-                <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
-                    <div class="flex justify-between items-center">
+            <nav class="bg-white shadow dark:bg-gray-800">
+                <div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
+                    <div class="flex items-center justify-between">
                         <div>
-                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
 
                         <div class="flex md:hidden">
                             <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                                     <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                 </svg>
                             </button>
                         </div>
                     </div>
 
-                    <div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
+                    <div :class="isOpen ? '' : 'hidden'" class="items-center md:flex">
                         <div class="flex flex-col md:flex-row md:mx-6">
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
+                            <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
+                            <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
+                            <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
+                            <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
                         </div>
 
                         <div class="flex justify-center md:block">
                             <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
-                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>
 
-                                <span class="absolute top-0 left-0 rounded-full bg-indigo-500 text-white p-1 text-xs"></span>
+                                <span class="absolute top-0 left-0 p-1 text-xs text-white bg-indigo-500 rounded-full"></span>
                             </a>
                         </div>
                     </div>
@@ -48,17 +48,17 @@
                 name: 'E-Commerce',
                 isOpen: false,
                 code: `
-        <nav class="bg-white dark:bg-gray-800 shadow">
-            <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
-                <div class="flex justify-between items-center">
+        <nav class="bg-white shadow dark:bg-gray-800">
+            <div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
+                <div class="flex items-center justify-between">
                     <div>
-                        <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                        <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                     </div>
                     
                     <!-- Mobile menu button -->
                     <div class="flex md:hidden">
                         <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                            <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                            <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                                 <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                             </svg>
                         </button>
@@ -66,21 +66,21 @@
                 </div>
 
                 <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                <div class="md:flex items-center">
+                <div class="items-center md:flex">
                     <div class="flex flex-col md:flex-row md:mx-6">
-                        <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
-                        <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
-                        <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
-                        <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
+                        <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
+                        <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
+                        <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
+                        <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
                     </div>
 
                     <div class="flex justify-center md:block">
                         <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                             </svg>
 
-                            <span class="absolute top-0 left-0 rounded-full bg-indigo-500 text-white p-1 text-xs"></span>
+                            <span class="absolute top-0 left-0 p-1 text-xs text-white bg-indigo-500 rounded-full"></span>
                         </a>
                     </div>
                 </div>
diff --git a/src/components/ui/Sections/AboutMe.vue b/src/components/ui/Sections/AboutMe.vue
index cd3df3b..bb72b4b 100644
--- a/src/components/ui/Sections/AboutMe.vue
+++ b/src/components/ui/Sections/AboutMe.vue
@@ -2,36 +2,36 @@
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
-                <div class="container mx-auto px-6 py-8">
-                    <div class="lg:flex items-center">
+                <div class="container px-6 py-8 mx-auto">
+                    <div class="items-center lg:flex">
                         <div class="lg:w-1/2">
-                            <h2 class="text-gray-800 dark:text-gray-100 text-3xl font-bold">Who I am</h2>
+                            <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Who I am</h2>
 
-                            <p class="text-gray-500 dark:text-gray-400 lg:max-w-md mt-4">
-                                Hi I am jane , software engineer <a class="text-indigo-600 dark:text-indigo-400 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
+                            <p class="mt-4 text-gray-500 dark:text-gray-400 lg:max-w-md">
+                                Hi I am jane , software engineer <a class="font-bold text-indigo-600 dark:text-indigo-400" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
                             </p>
 
-                            <div class="flex items-center -mx-2 mt-6">
+                            <div class="flex items-center mt-6 -mx-2">
                                 <a class="mx-2" href="#" aria-label="Twitter">
-                                    <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                         <path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
                                     </svg>
                                 </a>
                             
                                 <a class="mx-2" href="#" aria-label="Facebook">
-                                    <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                         <path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
                                     </svg>
                                 </a>
                             
                                 <a class="mx-2" href="#" aria-label="Linkden">
-                                    <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                         <path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
                                     </svg>
                                 </a>
                             
                                 <a class="mx-2" href="#" aria-label="Github">
-                                    <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                         <path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
                                     </svg>
                                 </a>
@@ -41,7 +41,7 @@
                         <div class="mt-8 lg:mt-0 lg:w-1/2">
                             <div class="flex items-center justify-center lg:justify-end">
                                 <div class="max-w-lg">
-                                    <img class="w-full h-64 object-cover object-center rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
+                                    <img class="object-cover object-center w-full h-64 rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
                                 </div>
                             </div>
                         </div>
@@ -59,36 +59,36 @@
                 name: 'About Me',
                 code: `
         <section class="bg-white dark:bg-gray-800">
-            <div class="container mx-auto px-6 py-8">
-                <div class="lg:flex items-center">
+            <div class="container px-6 py-8 mx-auto">
+                <div class="items-center lg:flex">
                     <div class="lg:w-1/2">
-                        <h2 class="text-gray-800 dark:text-gray-100 text-3xl font-bold">Who I am</h2>
+                        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Who I am</h2>
 
-                        <p class="text-gray-500 dark:text-gray-400 lg:max-w-md mt-4">
-                            Hi I am jane , software engineer <a class="text-indigo-600 dark:text-indigo-400 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
+                        <p class="mt-4 text-gray-500 dark:text-gray-400 lg:max-w-md">
+                            Hi I am jane , software engineer <a class="font-bold text-indigo-600 dark:text-indigo-400" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
                         </p>
 
-                        <div class="flex items-center -mx-2 mt-6">
+                        <div class="flex items-center mt-6 -mx-2">
                             <a class="mx-2" href="#" aria-label="Twitter">
-                                <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                     <path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
                                 </svg>
                             </a>
                         
                             <a class="mx-2" href="#" aria-label="Facebook">
-                                <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                     <path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
                                 </svg>
                             </a>
                         
                             <a class="mx-2" href="#" aria-label="Linkden">
-                                <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                     <path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
                                 </svg>
                             </a>
                         
                             <a class="mx-2" href="#" aria-label="Github">
-                                <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                     <path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
                                 </svg>
                             </a>
@@ -98,7 +98,7 @@
                     <div class="mt-8 lg:mt-0 lg:w-1/2">
                         <div class="flex items-center justify-center lg:justify-end">
                             <div class="max-w-lg">
-                                <img class="w-full h-64 object-cover object-center rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
+                                <img class="object-cover object-center w-full h-64 rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
                             </div>
                         </div>
                     </div>
diff --git a/src/components/ui/Sections/Feature.vue b/src/components/ui/Sections/Feature.vue
index faf5ea5..938a178 100644
--- a/src/components/ui/Sections/Feature.vue
+++ b/src/components/ui/Sections/Feature.vue
@@ -2,34 +2,34 @@
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
-                <div class="container mx-auto px-6 py-8">
-                    <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+                <div class="container px-6 py-8 mx-auto">
+                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                         <div>
-                            <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                            <svg class="w-8 h-8" viewBox="0 0 30 30" fill="none">
                                 <path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/>
                             </svg>
             
-                            <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Default Taiwindcss Config</h1>
+                            <h1 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">Default Taiwindcss Config</h1>
             
                             <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                         </div>
             
                         <div>
-                            <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                            <svg class="w-8 h-8" viewBox="0 0 30 30" fill="none">
                                 <path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/>
                             </svg>    
             
-                            <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Fully Responsive Components</h1>
+                            <h1 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">Fully Responsive Components</h1>
                             
                             <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                         </div>
                         
                         <div>
-                            <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                            <svg class="w-8 h-8" viewBox="0 0 30 30" fill="none">
                                 <g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs>
                             </svg>
                         
-                            <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">RTL Languages Support</h1>
+                            <h1 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">RTL Languages Support</h1>
                         
                             <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                         </div>
@@ -47,34 +47,34 @@
                 name: 'Feature',
                 code:  `
         <section class="bg-white dark:bg-gray-800">
-            <div class="container mx-auto px-6 py-8">
-                <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+            <div class="container px-6 py-8 mx-auto">
+                <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                     <div>
-                        <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                        <svg class="w-8 h-8" viewBox="0 0 30 30" fill="none">
                             <path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/>
                         </svg>
         
-                        <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Default Taiwindcss Config</h1>
+                        <h1 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">Default Taiwindcss Config</h1>
         
                         <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                     </div>
         
                     <div>
-                        <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                        <svg class="w-8 h-8" viewBox="0 0 30 30" fill="none">
                             <path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/>
                         </svg>    
         
-                        <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Fully Responsive Components</h1>
+                        <h1 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">Fully Responsive Components</h1>
                         
                         <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                     </div>
                     
                     <div>
-                        <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                        <svg class="w-8 h-8" viewBox="0 0 30 30" fill="none">
                             <g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs>
                         </svg>
                     
-                        <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">RTL Languages Support</h1>
+                        <h1 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">RTL Languages Support</h1>
                     
                         <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                     </div>
diff --git a/src/components/ui/Sections/OurTeam.vue b/src/components/ui/Sections/OurTeam.vue
index 3a24073..9fa7164 100644
--- a/src/components/ui/Sections/OurTeam.vue
+++ b/src/components/ui/Sections/OurTeam.vue
@@ -1,13 +1,13 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <section class="bg-white dark:bg-gray-800 container mx-auto p-6">
-                <h2 class="text-gray-800 dark:text-white font-medium capitalize text-xl md:text-2xl">Our Team</h2>
+            <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>
 
                 <div class="flex items-center justify-center">
-                    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
-                        <div class="max-w-xs w-full text-center">
-                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
+                    <div class="grid gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                        <div class="w-full max-w-xs text-center">
+                            <img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
 
                             <div class="mt-2">
                                 <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Ahmed Omer</h3>
@@ -15,8 +15,8 @@
                             </div>
                         </div>
 
-                        <div class="max-w-xs w-full text-center">
-                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
+                        <div class="w-full max-w-xs text-center">
+                            <img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
 
                             <div class="mt-2">
                                 <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Jane Doe</h3>
@@ -24,8 +24,8 @@
                             </div>
                         </div>
 
-                        <div class="max-w-xs w-full text-center">
-                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
+                        <div class="w-full max-w-xs text-center">
+                            <img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
 
                             <div class="mt-2">
                                 <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Steve Ben</h3>
@@ -33,8 +33,8 @@
                             </div>
                         </div>
 
-                        <div class="max-w-xs w-full text-center">
-                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" 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"/>
+                        <div class="w-full max-w-xs text-center">
+                            <img class="object-cover object-center w-full h-48 mx-auto rounded-lg" 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"/>
 
                             <div class="mt-2">
                                 <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Patterson Johnson</h3>
@@ -54,13 +54,13 @@
             return {
                 name: 'Our Team',
                 code: `
-        <section class="bg-white dark:bg-gray-800 container mx-auto p-6">
-            <h2 class="text-gray-800 dark:text-white font-medium capitalize text-xl md:text-2xl">Our Team</h2>
+        <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>
 
             <div class="flex items-center justify-center">
-                <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
-                    <div class="max-w-xs w-full text-center">
-                        <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
+                <div class="grid gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                    <div class="w-full max-w-xs text-center">
+                        <img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
 
                         <div class="mt-2">
                             <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Ahmed Omer</h3>
@@ -68,8 +68,8 @@
                         </div>
                     </div>
 
-                    <div class="max-w-xs w-full text-center">
-                        <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
+                    <div class="w-full max-w-xs text-center">
+                        <img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
 
                         <div class="mt-2">
                             <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Jane Doe</h3>
@@ -77,8 +77,8 @@
                         </div>
                     </div>
 
-                    <div class="max-w-xs w-full text-center">
-                        <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
+                    <div class="w-full max-w-xs text-center">
+                        <img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
 
                         <div class="mt-2">
                             <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Steve Ben</h3>
@@ -86,8 +86,8 @@
                         </div>
                     </div>
 
-                    <div class="max-w-xs w-full text-center">
-                        <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" 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"/>
+                    <div class="w-full max-w-xs text-center">
+                        <img class="object-cover object-center w-full h-48 mx-auto rounded-lg" 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"/>
 
                         <div class="mt-2">
                             <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Patterson Johnson</h3>
diff --git a/src/components/utilities/CodeSnippet.vue b/src/components/utilities/CodeSnippet.vue
index 5a7979f..eec8df5 100644
--- a/src/components/utilities/CodeSnippet.vue
+++ b/src/components/utilities/CodeSnippet.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="relative rounded overflow-hidden">
-        <pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden text-sm">{{ code }}</code></pre>
+    <div class="relative overflow-hidden rounded">
+        <pre><code class="px-8 py-6 overflow-hidden overflow-x-scroll text-sm rounded-md">{{ code }}</code></pre>
 
-        <div class="absolute right-0 top-0">
+        <div class="absolute top-0 right-0">
             <button class="px-3 py-2 text-gray-600 hover:text-gray-400 focus:outline-none" v-clipboard:success="onCopy" v-clipboard:copy="code">
-                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
                     <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
                 </svg>
diff --git a/src/components/utilities/ViewComponent.vue b/src/components/utilities/ViewComponent.vue
index 560fbbb..db64bfe 100644
--- a/src/components/utilities/ViewComponent.vue
+++ b/src/components/utilities/ViewComponent.vue
@@ -1,27 +1,27 @@
 <template>
-    <div class="bg-gray-300 dark:bg-gray-600 border dark:border-gray-600 rounded-md overflow-hidden mb-12">
-        <div class="bg-white dark:bg-gray-800 px-4 py-2 border-b dark:border-gray-600">
-            <div class="flex flex-col md:flex-row justify-between items-center">
+    <div class="mb-12 overflow-hidden bg-gray-300 border rounded-md dark:bg-gray-600 dark:border-gray-600">
+        <div class="px-4 py-2 bg-white border-b dark:bg-gray-800 dark:border-gray-600">
+            <div class="flex flex-col items-center justify-between md:flex-row">
                 <div class="flex items-center">
-                    <h3 class="text-gray-700 dark:text-gray-200 font-medium capitalize md:text-lg">{{ name }}</h3>
+                    <h3 class="font-medium text-gray-700 capitalize dark:text-gray-200 md:text-lg">{{ name }}</h3>
                 </div>
 
                 <div class="mt-4 md:mt-0">
-                    <app-button @click="rtl =! rtl" class="rounded-md p-1 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="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
+                    <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" />
                             <path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
                         </svg>
                     </app-button>
 
-                    <app-button @click="viewCode =! viewCode" class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="viewCode? '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="View code snippet">
-                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <app-button @click="viewCode =! viewCode" class="p-1 mx-4 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="viewCode? '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="View code snippet">
+                        <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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                         </svg>
                     </app-button>
 
-                    <app-button v-clipboard:success="onCopy" v-clipboard:copy="code" class="bg-gray-200 dark:bg-gray-700 dark:text-gray-200 rounded-md p-1 text-gray-600 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="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <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" />
                         </svg>
                     </app-button>
@@ -29,15 +29,15 @@
             </div>
         </div>
 
-        <div class="flex justify-center items-center">
-            <div class="w-full relative" :dir="rtl? 'rtl' : 'ltr'">
-                <slot class="w-full h-full absolute top-0 left-0" name="component"></slot>
+        <div class="flex items-center justify-center">
+            <div class="relative w-full" :dir="rtl? 'rtl' : 'ltr'">
+                <slot class="absolute top-0 left-0 w-full h-full" name="component"></slot>
 
                 <transition name="fade">
                     <div v-if="copied">
-                        <div class="w-full h-full absolute top-0 left-0 z-50">
-                            <div class="bg-gray-300 dark:bg-gray-700 h-full flex items-center justify-center">
-                                <p class="text-gray-700 dark:text-gray-200 text-2xl">Copied!</p>
+                        <div class="absolute top-0 left-0 z-50 w-full h-full">
+                            <div class="flex items-center justify-center h-full bg-gray-300 dark:bg-gray-700">
+                                <p class="text-2xl text-gray-700 dark:text-gray-200">Copied!</p>
                             </div>
                         </div>
                     </div>