E R P Reports Dashboard - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>ERP Reports</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg gray 100 text gray 800"> <header class="bg blue 600 text white py 6 shadow md"> <div class="container mx auto text center"> <h1 class="text 3xl font bold">ERP Reports</h1> <p class="mt 2 text lg">Analyze your business with insightful reports</p> </div> </header> <main class="container mx auto py 8 px 4"> <div class="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> <! Card 1: Sales Performance Reports > <div class="bg white rounded lg shadow md p 6"> <h2 class="text xl font bold mb 4">Sales Performance Reports</h2> <p class="text gray 600 mb 4">Monitor and optimize your sales performance with detailed insights.</p> <ul class="list disc list inside text blue 500"> <li><a href="#" class="hover:underline">Sales Summary Report</a></li> <li><a href="#" class="hover:underline">Sales by Product Report</a></li> <li><a href="#" class="hover:underline">Sales by Customer Report</a></li> <li><a href="#" class="hover:underline">Sales by Sales Employee Report</a></li> <li><a href="#" class="hover:underline">Sales Trend Report</a></li> </ul> </div> <! Card 2: Order Analysis Reports > <div class="bg white rounded lg shadow md p 6"> <h2 class="text xl font bold mb 4">Order Analysis Reports</h2> <p class="text gray 600 mb 4">Understand order patterns and optimize your fulfillment process.</p> <ul class="list disc list inside text blue 500"> <li><a href="#" class="hover:underline">Pending Orders Report</a></li> <li><a href="#" class="hover:underline">Completed Orders Report</a></li> <li><a href="#" class="hover:underline">Order Cancellation Report</a></li> <li><a href="#" class="hover:underline">High Value Orders Report</a></li> <li><a href="#" class="hover:underline">Order Fulfillment Time Report</a></li> </ul> </div> <! Card 3: Inventory and Product Reports > <div class="bg white rounded lg shadow md p 6"> <h2 class="text xl font bold mb 4">Inventory and Product Reports</h2> <p class="text gray 600 mb 4">Keep track of your stock and product performance.</p> <ul class="list disc list inside text blue 500"> <li><a href="#" class="hover:underline">Stock Movement Report</a></li> <li><a href="#" class="hover:underline">Low Stock Alert Report</a></li> <li><a href="#" class="hover:underline">Most Popular Products Report</a></li> <li><a href="#" class="hover:underline">Least Popular Products Report</a></li> </ul> </div> <! Card 4: Customer Insights Reports > <div class="bg white rounded lg shadow md p 6"> <h2 class="text xl font bold mb 4">Customer Insights Reports</h2> <p class="text gray 600 mb 4">Gain insights into customer behavior and preferences.</p> <ul class="list disc list inside text blue 500"> <li><a href="#" class="hover:underline">Customer Lifetime Value Report</a></li> <li><a href="#" class="hover:underline">Inactive Customers Report</a></li> <li><a href="#" class="hover:underline">Geographic Sales Distribution Report</a></li> </ul> </div> <! Card 5: Revenue and Financial Reports > <div class="bg white rounded lg shadow md p 6"> <h2 class="text xl font bold mb 4">Revenue and Financial Reports</h2> <p class="text gray 600 mb 4">Track revenue, expenses, and profitability.</p> <ul class="list disc list inside text blue 500"> <li><a href="#" class="hover:underline">Revenue vs Expense Report</a></li> <li><a href="#" class="hover:underline">Sales Tax Report</a></li> <li><a href="#" class="hover:underline">Profit Margin Report</a></li> </ul> </div> <! Card 6: Delivery and Logistics Reports > <div class="bg white rounded lg shadow md p 6"> <h2 class="text xl font bold mb 4">Delivery and Logistics Reports</h2> <p class="text gray 600 mb 4">Optimize your delivery processes with actionable insights.</p> <ul class="list disc list inside text blue 500"> <li><a href="#" class="hover:underline">Delivery Status Report</a></li> <li><a href="#" class="hover:underline">On Time Delivery Report</a></li> <li><a href="#" class="hover:underline">Delivery Cost Analysis Report</a></li> </ul> </div> </div> </main> <footer class="bg gray 800 text white py 4"> <div class="container mx auto text center"> <p>© 2024 Your Company. All rights reserved.</p> </div> </footer> </body> </html> i want my html more attractive with global color like below <! Tailwind Configuration > <script> tailwind.config = { darkMode: "class", theme: { extend: { colors: { border: "hsl(var( border))", background: "hsl(var( background))", foreground: "hsl(var( foreground))", primary: { DEFAULT: "hsl(var( primary))", foreground: "hsl(var( primary foreground))", }, muted: { DEFAULT: "hsl(var( muted))", foreground: "hsl(var( muted foreground))", }, }, fontFamily: { sans: ['Poppins', 'Arial', 'sans serif'], // Add fallback fonts }, } } } </script> <! Custom Fonts > <style> /* Import Google Fonts with additional weights */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* Light Mode Variables */ :root { background: 0 0% 100%; foreground: 0 0% 3.9%; card header: 0 0% 90%; card header foreground: 0 0% 3.9%; card: 0 0% 100%; card foreground: 0 0% 3.9%; popover: 0 0% 100%; popover foreground: 0 0% 3.9%; /* primary: 222.2 47.4% 11.2%; */ primary: 356 83% 36%; /* Adjusted for #b01116 */ primary foreground: 0 0% 98%; secondary: 0 0% 96.1%; secondary foreground: 0 0% 9%; muted: 0 0% 96.1%; muted foreground: 0 0% 45.1%; accent: 0 0% 96.1%; accent foreground: 0 0% 9%; destructive: 0 84.2% 60.2%; destructive foreground: 0 0% 98%; border: 0 0% 89.8%; input: 0 0% 89.8%; ring: 0 0% 3.9%; } /* Dark Mode Variables */ .dark { background: 0 0% 3.9%; foreground: 0 0% 98%; card header: 0 0% 3.9%; card header foreground: 0 0% 98%; card: 0 0% 3.9%; card foreground: 0 0% 98%; popover: 0 0% 3.9%; popover foreground: 0 0% 98%; /* primary: 0 0% 98%; */ primary: 356 83% 36%; /* Adjusted for #b01116 */ primary foreground: 0 0% 9%; secondary: 0 0% 14.9%; secondary foreground: 0 0% 98%; muted: 0 0% 14.9%; muted foreground: 0 0% 63.9%; accent: 0 0% 14.9%; accent foreground: 0 0% 98%; destructive: 0 62.8% 30.6%; destructive foreground: 0 0% 98%; border: 0 0% 14.9%; input: 0 0% 14.9%; ring: 0 0% 83.1%; } /* Global Font */ body { font family: 'Poppins', sans serif; }
