beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
khatabwedaa 2020-05-04 01:52:21 +02:00
parent 731da992c7
commit 7aae017d69
6 changed files with 51 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<title>Meraki UI</title>
</head>
<body>
<noscript>

12
src/App.vue
View file

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

2
src/assets/css/tailwind.css
View file

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

1
src/assets/img/undraw_moonlight_5ksn.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

25
src/views/Header.vue Normal file
View 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>

13
tailwind.config.js
View file

@ -1,7 +1,18 @@
module.exports = {
purge: [],
theme: {
extend: {},
extend: {
fontFamily: {
inter: [
'Inter'
],
},
spacing: {
'7': '1.75rem',
'9': '2.25rem',
'96': '24rem',
},
},
},
variants: {},
plugins: [],