Magdy Atef Zahran

Dashboard UI بـ Tailwind + React (Vite)

1. Project Setup

npm create vite@latest tailwind-dashboard -- --template react<br /> cd tailwind-dashboard<br /> npm i<br /> npm i -D tailwindcss postcss autoprefixer<br /> npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */<br /> export default {<br /> darkMode: 'class',<br /> content: ['./index.html','./src/**/*.{js,jsx,ts,tsx}'],<br /> theme: {<br /> extend: {<br /> colors: {<br /> brand: {<br /> 50:'#eef2ff',100:'#e0e7ff',500:'#6366f1',600:'#4f46e5',700:'#4338ca'<br /> }<br /> },<br /> boxShadow: { soft: '0 8px 24px rgba(0,0,0,.08)'}<br /> },<br /> },<br /> plugins: [],<br /> }

src/index.css

@tailwind base;<br /> @tailwind components;<br /> @tailwind utilities;</p> <p>@layer base {<br /> html { @apply antialiased; }<br /> body { @apply bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100; }<br /> }</p> <p>@layer components {<br /> .card { @apply bg-white dark:bg-gray-900 rounded-2xl shadow-soft p-5; }<br /> .btn { @apply inline-flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition hover:opacity-90; }<br /> .btn-primary { @apply btn bg-brand-600 text-white; }<br /> .btn-ghost { @apply btn bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800; }<br /> .input { @apply w-full rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-500; }<br /> .badge { @apply inline-flex items-center px-2 py-1 rounded-lg text-xs font-medium; }<br /> .badge-green { @apply badge bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300; }<br /> .badge-amber { @apply badge bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300; }<br /> }

index.html

<!doctype html><br /> <html lang="en" class="h-full"><br /> <head><br /> <meta charset="UTF-8" /><br /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /><br /> <title>Tailwind Dashboard</title><br /> </head><br /> <body class="h-full"><br /> <div id="root"></div><br /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22module%22%20src%3D%22%2Fsrc%2Fmain.jsx%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object mce-object-script" width="20" height="20" alt="<script>" /><br /> </body><br /> </html>

2. Project structure

src/<br /> main.jsx<br /> App.jsx<br /> data/mock.js<br /> components/<br /> Layout.jsx<br /> Sidebar.jsx<br /> Navbar.jsx<br /> StatCard.jsx<br /> Table.jsx

src/main.jsx

import React from 'react'<br /> import { createRoot } from 'react-dom/client'<br /> import './index.css'<br /> import App from './App'</p> <p>createRoot(document.getElementById('root')).render(<br /> <React.StrictMode><App/></React.StrictMode><br /> )

src/App.jsx

import Layout from './components/Layout'<br /> import StatCard from './components/StatCard'<br /> import Table from './components/Table'<br /> import { orders } from './data/mock'</p> <p>export default function App() {<br /> return (<br /> <Layout><br /> {/* Cards */}<br /> <section className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5"><br /> <StatCard title="Revenue" value="$42,380" trend="+12.4%" hint="آخر 30 يوم" /><br /> <StatCard title="Orders" value="1,284" trend="+4.1%" hint="مقارنة بالأسبوع" /><br /> <StatCard title="Active Users" value="8,930" trend="+2.7%" hint="لحظي" /><br /> <StatCard title="Refunds" value="32" trend="-1.3%" hint="هذا الشهر" down /><br /> </section></p> <p> {/* Table */}<br /> <section className="mt-6 card"><br /> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"><br /> <h2 className="text-lg font-semibold">Recent Orders</h2><br /> <div className="flex gap-2"><br /> <input className="input" placeholder="Search by customer/product..." id="search-input"/><br /> </div><br /> </div><br /> <div className="mt-4"><br /> <Table data={orders}/><br /> </div><br /> </section><br /> </Layout><br /> )<br /> }

src/components/Layout.jsx

import { useState, useEffect } from 'react'<br /> import Sidebar from './Sidebar'<br /> import Navbar from './Navbar'</p> <p>export default function Layout({ children }) {<br /> const [sidebarOpen, setSidebarOpen] = useState(false)<br /> const [dark, setDark] = useState(false)</p> <p> useEffect(() => {<br /> document.documentElement.classList.toggle('dark', dark)<br /> }, [dark])</p> <p> return (<br /> <div className="min-h-screen flex bg-gray-50 dark:bg-gray-950"><br /> <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)}/><br /> <div className="flex-1 flex flex-col"><br /> <Navbar onMenu={() => setSidebarOpen(true)} dark={dark} setDark={setDark}/><br /> <main className="p-5 max-w-7xl w-full mx-auto">{children}</main><br /> </div><br /> </div><br /> )<br /> }

src/components/Sidebar.jsx

import { useEffect } from 'react'</p> <p>const links = [<br /> { label: 'Dashboard', icon: '🏠' },<br /> { label: 'Orders', icon: '🧾' },<br /> { label: 'Customers', icon: '👥' },<br /> { label: 'Reports', icon: '📈' },<br /> { label: 'Settings', icon: '⚙️' },<br /> ]</p> <p>export default function Sidebar({ open, onClose }) {<br /> useEffect(() => {<br /> const onEsc = (e) => e.key === 'Escape' && onClose()<br /> window.addEventListener('keydown', onEsc)<br /> return () => window.removeEventListener('keydown', onEsc)<br /> }, [onClose])</p> <p> return (<br /> <><br /> {/* Overlay (mobile) */}<br /> <div<br /> onClick={onClose}<br /> className={`fixed inset-0 bg-black/40 z-30 lg:hidden transition ${open ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}<br /> /><br /> {/* Drawer */}<br /> <aside className={`fixed z-40 lg:static lg:translate-x-0 top-0 left-0 h-full w-72 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 p-5 transition-transform ${open ? 'translate-x-0' : '-translate-x-full'}`}><br /> <div className="flex items-center justify-between mb-8"><br /> <span className="text-xl font-bold text-brand-700">DashKit</span><br /> <button onClick={onClose} className="lg:hidden btn-ghost rounded-full p-2">✖️</button><br /> </div><br /> <nav className="space-y-1"><br /> {links.map((l) => (<br /> <a key={l.label} href="#" className="flex items-center gap-3 px-3 py-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800"><br /> <span>{l.icon}</span><br /> <span className="font-medium">{l.label}</span><br /> </a><br /> ))}<br /> </nav><br /> <div className="mt-10"><br /> <div className="card"><br /> <p className="text-sm text-gray-600 dark:text-gray-300">Storage</p><br /> <div className="mt-2 h-2 bg-gray-200 dark:bg-gray-800 rounded-full"><br /> <div className="h-2 bg-brand-600 rounded-full" style={{width:'62%'}}/><br /> </div><br /> <p className="mt-2 text-xs text-gray-500">12.4GB / 20GB</p><br /> </div><br /> </div><br /> </aside><br /> </><br /> )<br /> }

src/components/Navbar.jsx

export default function Navbar({ onMenu, dark, setDark }) {<br /> return (<br /> <header className="sticky top-0 z-20 border-b border-gray-200 dark:border-gray-800 bg-white/70 dark:bg-gray-900/70 backdrop-blur"><br /> <div className="max-w-7xl mx-auto px-4 py-3 flex items-center gap-3"><br /> <button onClick={onMenu} className="lg:hidden btn-ghost rounded-xl">☰</button><br /> <div className="ml-auto flex items-center gap-2"><br /> <button onClick={() => setDark(!dark)} className="btn-ghost rounded-xl"><br /> {dark ? '🌙' : '🌞'}<br /> </button><br /> <div className="h-9 w-[1px] bg-gray-200 dark:bg-gray-800" /><br /> <div className="flex items-center gap-2"><br /> <img className="h-9 w-9 rounded-full" src="https://i.pravatar.cc/80?img=3" alt="avatar"/><br /> <div className="leading-tight"><br /> <p className="text-sm font-semibold">Magdy</p><br /> <p className="text-xs text-gray-500">Admin</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> </header><br /> )<br /> }

src/components/StatCard.jsx

export default function StatCard({ title, value, trend, hint, down=false }) {<br /> return (<br /> <div className="card"><br /> <p className="text-sm text-gray-500">{title}</p><br /> <div className="mt-2 flex items-end justify-between"><br /> <h3 className="text-2xl font-bold">{value}</h3><br /> <span className={`text-xs px-2 py-1 rounded-lg ${down ? 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-300' : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'}`}><br /> {trend}<br /> </span><br /> </div><br /> <p className="mt-1 text-xs text-gray-400">{hint}</p><br /> </div><br /> )<br /> }

src/components/Table.jsx

import { useMemo, useState } from 'react'</p> <p>export default function Table({ data }) {<br /> const [q, setQ] = useState('')<br /> const [sortBy, setSortBy] = useState({ key: 'date', dir: 'desc' })<br /> const [page, setPage] = useState(1)<br /> const pageSize = 8</p> <p> const filtered = useMemo(() => {<br /> const s = q.toLowerCase()<br /> return data.filter(r =><br /> r.customer.toLowerCase().includes(s) ||<br /> r.product.toLowerCase().includes(s) ||<br /> r.status.toLowerCase().includes(s)<br /> )<br /> }, [q, data])</p> <p> const sorted = useMemo(() => {<br /> const arr = [...filtered]<br /> arr.sort((a,b) => {<br /> const k = sortBy.key<br /> const va = a[k], vb = b[k]<br /> if (va < vb) return sortBy.dir === 'asc' ? -1 : 1<br /> if (va > vb) return sortBy.dir === 'asc' ? 1 : -1<br /> return 0<br /> })<br /> return arr<br /> }, [filtered, sortBy])</p> <p> const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize))<br /> const start = (page - 1) * pageSize<br /> const rows = sorted.slice(start, start + pageSize)</p> <p> const setSort = (key) => {<br /> setSortBy(prev => prev.key === key ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: 'asc' })<br /> }</p> <p> return (<br /> <><br /> <div className="mb-3"><br /> <input<br /> className="input"<br /> placeholder="Search…"<br /> value={q}<br /> onChange={(e)=>{ setQ(e.target.value); setPage(1) }}<br /> /><br /> </div></p> <p> <div className="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-800"><br /> <table className="min-w-full text-sm"><br /> <thead className="bg-gray-100 dark:bg-gray-800/50"><br /> <tr><br /> <Th onClick={()=>setSort('id')} active={sortBy.key==='id'} dir={sortBy.dir}>#</Th><br /> <Th onClick={()=>setSort('customer')} active={sortBy.key==='customer'} dir={sortBy.dir}>Customer</Th><br /> <Th onClick={()=>setSort('product')} active={sortBy.key==='product'} dir={sortBy.dir}>Product</Th><br /> <Th onClick={()=>setSort('amount')} active={sortBy.key==='amount'} dir={sortBy.dir}>Amount</Th><br /> <Th onClick={()=>setSort('status')} active={sortBy.key==='status'} dir={sortBy.dir}>Status</Th><br /> <Th onClick={()=>setSort('date')} active={sortBy.key==='date'} dir={sortBy.dir}>Date</Th><br /> <th className="px-4 py-3 text-right">Action</th><br /> </tr><br /> </thead><br /> <tbody><br /> {rows.map(r => (<br /> <tr key={r.id} className="border-t border-gray-200 dark:border-gray-800"><br /> <td className="px-4 py-3">{r.id}</td><br /> <td className="px-4 py-3 font-medium">{r.customer}</td><br /> <td className="px-4 py-3">{r.product}</td><br /> <td className="px-4 py-3">${r.amount.toLocaleString()}</td><br /> <td className="px-4 py-3"><br /> {r.status === 'paid' ? <span className="badge-green">Paid</span> :<br /> r.status === 'pending' ? <span className="badge-amber">Pending</span> :<br /> <span className="badge bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300">Cancelled</span>}<br /> </td><br /> <td className="px-4 py-3">{new Date(r.date).toLocaleDateString()}</td><br /> <td className="px-4 py-3 text-right"><br /> <button className="btn-ghost px-3 py-1 rounded-lg">View</button><br /> </td><br /> </tr><br /> ))}<br /> {rows.length === 0 && (<br /> <tr><td colSpan="7" className="px-4 py-10 text-center text-gray-500">No results</td></tr><br /> )}<br /> </tbody><br /> </table><br /> </div></p> <p> <div className="mt-4 flex items-center justify-between"><br /> <p className="text-xs text-gray-500"><br /> Showing {rows.length ? start+1 : 0}–{Math.min(start+pageSize, sorted.length)} of {sorted.length}<br /> </p><br /> <div className="flex items-center gap-2"><br /> <button disabled={page===1} onClick={()=>setPage(p=>Math.max(1,p-1))} className="btn-ghost rounded-xl disabled:opacity-40">Prev</button><br /> <span className="text-sm">{page}/{totalPages}</span><br /> <button disabled={page===totalPages} onClick={()=>setPage(p=>Math.min(totalPages,p+1))} className="btn-ghost rounded-xl disabled:opacity-40">Next</button><br /> </div><br /> </div><br /> </><br /> )<br /> }</p> <p>function Th({ children, onClick, active, dir }) {<br /> return (<br /> <th onClick={onClick} className="px-4 py-3 text-left cursor-pointer select-none"><br /> <span className="inline-flex items-center gap-1"><br /> {children}<br /> {active && (dir === 'asc' ? '▲' : '▼')}<br /> </span><br /> </th><br /> )<br /> }

src/data/mock.js

export const orders = [<br /> { id: 1001, customer:'Aesha Emad', product:'Pro Plan', amount:199, status:'paid', date:'2025-07-21' },<br /> { id: 1002, customer:'Omar Ali', product:'Starter', amount:39, status:'pending', date:'2025-07-22' },<br /> { id: 1003, customer:'Laila Noor', product:'Team Plan', amount:499, status:'paid', date:'2025-07-23' },<br /> { id: 1004, customer:'Karim Z.', product:'Pro Plan', amount:199, status:'cancelled', date:'2025-07-23' },<br /> { id: 1005, customer:'Nour A.', product:'Starter', amount:39, status:'paid', date:'2025-07-24' },<br /> { id: 1006, customer:'Youssef H.', product:'Team Plan', amount:499, status:'paid', date:'2025-07-24' },<br /> { id: 1007, customer:'Mariam S.', product:'Pro Plan', amount:199, status:'pending', date:'2025-07-25' },<br /> { id: 1008, customer:'Hana R.', product:'Starter', amount:39, status:'paid', date:'2025-07-25' },<br /> { id: 1009, customer:'Samir N.', product:'Enterprise', amount:1999, status:'paid', date:'2025-07-26' },<br /> { id: 1010, customer:'Dina F.', product:'Pro Plan', amount:199, status:'paid', date:'2025-07-26' },<br /> { id: 1011, customer:'Ahmed B.', product:'Starter', amount:39, status:'cancelled', date:'2025-07-27' },<br /> { id: 1012, customer:'Rana T.', product:'Team Plan', amount:499, status:'paid', date:'2025-07-27' },<br /> ]<br />