wip

src/App.vue

@@ -1,9 +1,17 @@
 <template>
-  <div id="app"></div>
+  <div class="font-inter" id="app">
+    <Header></Header>
+  </div>
 </template>
 
 <script>
-export default {}
+import Header from "./views/Header";
+
+export default {
+  components: {
+    Header
+  }
+}
 </script>
 
 <style src="./assets/css/tailwind.css"></style>

src/assets/css/tailwind.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
 @tailwind base;
 
 @tailwind components;

src/views/Header.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="bg-gray-900 border-t-4 border-blue-500">
+        <div class="container mx-auto px-6">
+            <div class="md:flex md:h-96 py-16 md:py-0">
+                <div class="flex items-center w-full w-1/2">
+                    <div class="max-w-sm text-white">
+                        <div class="text-xs font-light">Simple UI Starter</div>
+                        <h1 class="font-semibold text-2xl mt-2 text-white md:text-3xl">Meraki <span class="text-blue-400">UI</span> Components</h1>
+                        <p class="font-light mt-2">
+                            Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">tailwindcss</a> 
+                            components that support RTL languages & fully responsive based on flexbox, 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>
+                </div>
+                <div class="hidden justify-end items-end w-full w-1/2 md:flex">
+                    <div class="max-w-md">
+                        <img src="../assets/img/undraw_moonlight_5ksn.svg" alt="moon">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>