Initial commit: Vue3 Tailwind dashboard
This commit is contained in:
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
14
public/index.html
Normal file
14
public/index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Dashboard</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
28
src/App.vue
Normal file
28
src/App.vue
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50">
|
||||||
|
<nav class="bg-white shadow-md">
|
||||||
|
<div class="container mx-auto px-6 py-3">
|
||||||
|
<h1 class="text-xl font-bold text-gray-800">Dashboard</h1>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="container mx-auto px-6 py-10">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Client Analytics</h2>
|
||||||
|
<p class="text-gray-600">Total clients: 1,243</p>
|
||||||
|
<p class="text-green-600 font-bold">+12% MoM</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Revenue</h2>
|
||||||
|
<p class="text-gray-600">$42,890</p>
|
||||||
|
<p class="text-green-600 font-bold">+18% MoM</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-800 mb-4">Tasks</h2>
|
||||||
|
<p class="text-gray-600">14 open</p>
|
||||||
|
<p class="text-red-600 font-bold">3 overdue</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
4
src/main.js
Normal file
4
src/main.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
7
tailwind.config.js
Normal file
7
tailwind.config.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
module.exports = {
|
||||||
|
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user