import React from 'react';
const App: React.FC = () => {
return (
<div className="flex flex-col bg-gray-100 dark:bg-black min-h-screen">
<header className="bg-white dark:bg-gray-800 shadow">
<nav className="container flex items-center justify-between px-4 py-3 mx-auto">
<a href="#" className="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</a>
<div>
<button className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg focus:outline-none focus:bg-indigo-500">Sign In</button>
</div>
</nav>
</header>
<main className="flex-grow">
<div className="container mx-auto">
<h1 className="py-6 text-3xl font-semibold text-gray-800 dark:text-white">Welcome to the Dashboard</h1>
<div className="flex items-center justify-center py-8">
<div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
<div className="flex items-center p-6 bg-white border rounded shadow-xl dark:bg-gray-800">
<div className="p-3 mr-4 text-indigo-500 bg-indigo-100 rounded-full dark:text-indigo-1000 dark:bg-indigo-800">
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M6 4a2 2 0 10-4 0v4c0 1.103.897 2 2 2h4a2 2 0 100-4H6zm7.293 8.707a1 1 0 01-1.414 0L10 10.414l-2.879 2.88a1 1 0 11-1.414-1.415L8.586 9 5.707 6.121a1 1 0 111.414-1.414L10 7.586l2.879-2.879a1 1 0 111.414 1.414L11.414 9l2.879 2.879a1 1 0 010 1.414z"
clipRule="evenodd"
></path>
</svg>
</div>
<div>
<p className="mb-2 text-sm font-medium text-gray-600 dark:text-indigo-100">Users</p>
<p className="text-lg font-semibold text-gray-700 dark:text-white">
1,265
</p>
</div>
</div>
<div className="flex items-center p-6 bg-white border rounded shadow-xl dark:bg-gray-800">
<div className="p-3 mr-4 text-indigo-500 bg-indigo-100 rounded-full dark:text-indigo-1000 dark:bg-indigo-800">
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M6 4a2 2 0 10-4 0v4c0 1.103.897 2 2 2h4a2 2 0 100-4H6zm7.293 8.707a1 1 0 01-1.414 0L10 10.414l-2.879 2.88a1 1 0 11-1.414-1.415L8.586 9 5.707 6.121a1 1 0 111.414-1.414L10 7.586l2.879-2.879a1 1 0 111.414 1.414L11.414 9l2.879 2.879a1 1 0 010 1.414z"
clipRule="evenodd"
></path>
</svg>
</div>
<div>
<p className="mb-2 text-sm font-medium text-gray-600 dark:text-indigo-100">Orders</p>
<p className="text-lg font-semibold text-gray-700 dark:text-white">
748
</p>
</div>
</div>
<div className="flex items-center p-6 bg-white border rounded shadow-xl dark:bg-gray-800">
<div className="p-3 mr-4 text-indigo-500 bg-indigo-100 rounded-full dark:text-indigo-1000 dark:bg-indigo-800">
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M6 4a2 2 0 10-4 0v4c0 1.103.897 2 2 2h4a2 2 0 100-4H6zm7.293 8.707a1 1 0 01-1.414 0L10 10.414l-2.879 2.88a1 1 0 11-1.414-1.415L8.586 9 5.707 6.121a1 1 0 111.414-1.414L10 7.586l2.879-2.879a1 1 0 111.414 1.414L11.414 9l2.879 2.879a1 1 0 010 1.414z"
clipRule="evenodd"
></path>
</svg>
</div>
<div>
<p className="mb-2 text-sm font-medium text-gray-600 dark:text-indigo-100">Revenue</p>
<p className="text-lg font-semibold text-gray-700 dark:text-white">
$35,720
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<footer className="bg-white dark:bg-gray-800 shadow">
<div className="container flex items-center justify-between p-4 mx-auto">
<p className="text-sm font-bold text-gray-700">Dashboard © 2022</p>
</div>
</footer>
</div>
);
};
export default App;