wip
This commit is contained in:
parent
731da992c7
commit
7aae017d69
|
@ -5,7 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title>Meraki UI</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|
12
src/App.vue
12
src/App.vue
|
@ -1,9 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app"></div>
|
<div class="font-inter" id="app">
|
||||||
|
<Header></Header>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {}
|
import Header from "./views/Header";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Header
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style src="./assets/css/tailwind.css"></style>
|
<style src="./assets/css/tailwind.css"></style>
|
||||||
|
|
|
@ -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 base;
|
||||||
|
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
|
|
1
src/assets/img/undraw_moonlight_5ksn.svg
Normal file
1
src/assets/img/undraw_moonlight_5ksn.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 17 KiB |
25
src/views/Header.vue
Normal file
25
src/views/Header.vue
Normal file
|
@ -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>
|
|
@ -1,7 +1,18 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
purge: [],
|
purge: [],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
inter: [
|
||||||
|
'Inter'
|
||||||
|
],
|
||||||
|
},
|
||||||
|
spacing: {
|
||||||
|
'7': '1.75rem',
|
||||||
|
'9': '2.25rem',
|
||||||
|
'96': '24rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
variants: {},
|
variants: {},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|
Loading…
Reference in a new issue