dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="icon" href="./components/images/LOGO Shape.png">
    <link rel="stylesheet" href="./components/style.css">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <!-- dashboard started -->
    <div class="flex">
        <!-- first section-->
        <div class="w-1/4 border-2">
            <!-- logo -->
            <div class="flex items-center p-5">
                <span><img src="./components/images/LOGO Shape.png" class="h-6 sm:h-10 md:h-12"></span>
                <span class="text-sm sm:text-2xl font-bold">Elixer . DS</span>
            </div>

            <!-- menu div -->
            <div class="menu__div">
                <!-- search  -->
                <div class=" flex justify-center">
                    <input type="text" class="h-12 rounded-md border-2 w-32 md:w-80 input__search" placeholder="search">
                </div>
                
                <!-- admin tools -->
                <div class="grid justify-start text-sm mt-6 space-y-4 md:px-10 md:text-md">

                    <span class="text-sm md:text-lg">Admin Tools</span>

                    <div class="flex  items-center space-x-6">
                        <img src="./components/images/admintools1.png" class="h-4 md:h-7">
                        <span>Dashboard</span>
                    </div>

                    <div class="flex  items-center space-x-6">
                        <img src="./components/images/admintools2.png" class="h-4 md:h-7">
                        <span>Bussiness</span>
                    </div>

                    <div class="flex  items-center space-x-6">
                        <img src="./components/images/admintools3.png" class="h-4 md:h-7">
                        <span>Clients</span>
                    </div>

                    <div class="flex  items-center space-x-6">
                        <img src="./components/images/admintools4.png" class="h-4 md:h-7">
                        <span>Analytics</span>
                    </div>

                    <div class="flex  items-center space-x-6">
                        <img src="./components/images/admintools5.png" class="h-4 md:h-7">
                        <span>Notification</span>
                    </div>

                </div>
                <!-- categeories -->
                <div class="grid justify-start text-sm mt-8 space-y-4 md:px-10 md:text-lg">

                    <span class="text-sm md:text-lg">categeories</span>

                    <div class="flex items-center space-x-6">
                        <div class="h-2 w-2 rounded-full bg-green-500"></div>
                        <span>Income</span>
                    </div>

                    <div class="flex items-center space-x-6">
                        <div class="h-2 w-2 rounded-full bg-orange-500"></div>
                        <span>Expense</span>
                    </div>

                    <div class="flex items-center space-x-6">
                        <div class="h-2 w-2 rounded-full bg-violet-500"></div>
                        <span>Investment</span>
                    </div>

                    <div class="flex items-center space-x-6">
                        <div class="h-2 w-2 rounded-full bg-blue-500"></div>
                        <span>Assets</span>
                    </div>

                </div>
                
                <!-- get help section -->
                <div class="grid justify-start text-sm mt-8 space-y-4 md:px-10 md:text-lg">

                    <div class="flex items-center space-x-6">
                        <img src="./components/images/gethelp1.png" class="">
                        <span>Get help</span>
                    </div>

                    <div class="flex items-center space-x-6 ">
                        <img src="./components/images/gethelp2.png" class="">
                        <span>Settings</span>
                    </div>

                    <div class="flex items-center space-x-6">
                        <img src="./components/images/gethelp3.png" class="">
                        <div class="grid">
                            <span>Dragos B</span>
                            <span class="text-slate-500">Premium User</span>
                        </div>
                        <img src="./components/images/gethelp4.png" class="h-1">
                    </div>

                </div>
            </div>

        </div>
        <!-- second section -->
        <div class="w-3/4">
            
            <div class="h-20 p-5 flex justify-between items-center text-sm md:text-lg border-b-4">
                <span>Dashboard</span>

                <div class="flex space-x-1 items-center md:space-x-3">

                        <div class="flex rounded-2xl p-2 border-2 bg-white items-center">
                            <img src="./components/images/filters.png" class="h-4">
                            <span class="pl-3">Filters</span>
                        </div>

                        <div class="flex rounded-2xl border-2 p-2 chart__color items-center justify-center ">
                            <img src="./components/images/upgradeaccount.png" class="h-6">
                            <span class="text-sm  text-white md:text-lg pl-2">Upgrade account</span>
                        </div>

                </div>

            </div>
<!-- overview  and quick actions div -->
            <div class="flex">

                <div class=" w-3/4 border-2 m-2 rounded-lg border-gray-200">
                    <!-- financial data overview -->
                    <div class="flex justify-between">
                        
                        <div class="grid text-sm px-2">
                            <span>overview</span>
                            <span>Financial Data</span>
                        </div>
                        
                        <div class="flex  items-center text-sm space-x-3 px-3">
                            
                            <span class="h-1 w-4 rounded-2xl bg-gray-500"></span>
                            <span>Previous Year</span>
                            <span class="h-1 w-4 rounded-2xl bg-blue-500"></span>
                            <span>Current Year</span>
                            
                            <span>
                                <button class="rounded-xl border-2 p-2 flex items-center">
                                    Monthly
                                    <img src="./components/images/dropdown.png" class="pl-3"/>
                                </button>
                            </span>
                            
                        </div>
                    </div>
                    <!-- financial data overview over  -->

                    <!-- graphs div started -->
                    <div class="flex items-end space-x-9 px-2">

                        <div class="flex justify-center  items-center h-96">
                            <div class="grid px-2 text-slate-500  space-y-20 items-center">
                                <span>25k</span>
                                <span>15K</span>
                                <span>5k</span>
                                <span>0</span>
                            </div>
                        </div>

                        <div class="grid text-sm space-y-2">
                            <div class="h-60 w-10 bg-blue-300 rounded-lg grid items-end">
                                <div class="h-40 w-10 bg-blue-500 rounded-lg"></div>
                            </div>
                            <span>Oct</span>
                        </div>

                        <div class="grid text-sm space-y-2">
                            <div class="h-80 w-10 bg-blue-300 rounded-lg grid items-end">
                                <div class="h-60 w-10 bg-blue-500 rounded-lg"></div>
                            </div>
                            <span>Nov</span>
                        </div>

                        <div class="grid text-sm space-y-2">
                            <div class="h-56 w-10 bg-blue-300 rounded-lg grid items-end">
                                <div class="h-32 w-10 bg-blue-500 rounded-lg"></div>
                            </div>
                            <span>Dec</span>
                        </div>

                        <div class="grid text-sm space-y-2">
                            <div class="h-80 w-10 bg-blue-300 rounded-lg grid items-end">
                                <div class="h-60 w-10 bg-blue-500 rounded-lg"></div>
                            </div>
                            <span>Jan</span>
                        </div>

                        <div class="grid text-sm space-y-2">
                            <div class="h-48 w-10 bg-blue-300 rounded-lg grid items-end">
                                <div class="h-20 w-10 bg-blue-500 rounded-lg"></div>
                            </div>
                            <span>Feb</span>
                        </div>

                        <div class="grid text-sm space-y-2">
                            <div class="h-60 w-10 bg-blue-300 rounded-lg grid items-end">
                                <div class="h-44 w-10 bg-blue-500 rounded-lg"></div>
                            </div>
                            <span>Mar</span>
                        </div>

                        <div class="grid text-sm space-y-2">
                            <div class="h-52 w-10 bg-blue-300 rounded-lg grid items-end">
                                <div class="h-36 w-10 bg-blue-500 rounded-lg"></div>
                            </div>
                            <span>Apr</span>
                        </div>

                        <div class="grid text-sm space-y-2">
                            <div class="h-80 w-10 bg-blue-300 rounded-lg grid items-end">
                                <div class="h-52 w-10 bg-blue-500 rounded-lg"></div>
                            </div>
                            <span>May</span>
                        </div>

                        <div class="grid text-sm space-y-2">
                            <div class="h-60 w-10 bg-blue-300 rounded-lg grid items-end">
                                <div class="h-32 w-10 bg-blue-500 rounded-lg"></div>
                            </div>
                                <span>Jun</span>
                        </div>

                    </div>

                </div>

                <div class="w-1/3 m-2">
                    <!-- quick actions div -->
                    <div class="px-2 border-2 rounded-lg space-y-6 p-2">

                        <div>
                            <span>Quick Actions</span>
                        </div>

                        <div class="flex justify-between items-center px-1">
                            <button class="flex border-2 rounded-lg h-10 w-28 justify-center items-center font-bold">
                                Send
                                <img src="./components/images/arrow-up-right.png" />
                            </button>
                            <button class="flex border-2 rounded-lg h-10 w-28 justify-center items-center font-bold">
                                Recieve
                                <img src="./components/images/arrow-down-left.png" />    
                            </button>
                            <button class="flex p-1 border-2 rounded-lg">
                                <img src="./components/images/more-horizontalham.png" />
                            </button>
                        </div>

                    </div>

                    <!-- recent activity class -->
                    <div class="rounded-lg border-2 space-y-2 px-2 mt-2">
                        <div class="grid text-sm">
                            <span class="text-lg">Recent Activity</span>
                            <span>Transactions</span>
                        </div>

                        <div class="grid space-y-6">
                            <!-- sarah class -->
                            <div class="flex justify-between px-2">
                                <div class="flex items-center">
                                    <img src="./components/images/Avatar (1).png" />
                                    <div class="grid text-sm">
                                        <span class="text-lg">Sarah H</span>
                                        <span>12 min ago</span>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div class="h-2 w-2 rounded-full bg-orange-500"></div>
                                    <div>
                                        <span>In process</span>
                                    </div>
                                </div>
                            </div>

                            <!-- mark m div -->
                            <div class="flex justify-between px-2">
                                <div class="flex items-center">
                                    <img src="./components/images/Avatar (2).png" />
                                    <div class="grid text-sm">
                                        <span class="text-lg">Mark M</span>
                                        <span>3h ago</span>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div class="h-2 w-2 rounded-full bg-orange-500"></div>
                                    <div>
                                        <span>In process</span>
                                    </div>
                                </div>
                            </div>

                            <!-- joy f -->
                            <div class="flex justify-between px-2">
                                <div class="flex items-center">
                                    <img src="./components/images/Avatar (3).png" />
                                    <div class="grid text-sm">
                                        <span class="text-lg">Joy F</span>
                                        <span>1 day ago</span>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div class="h-2 w-2 rounded-full bg-orange-500"></div>
                                    <div>
                                        <span>In process</span>
                                    </div>
                                </div>
                            </div>

                            <!-- adina g -->
                            <div class="flex justify-between px-2">
                                <div class="flex items-center">
                                    <img src="./components/images/Avatar (4).png" />
                                    <div class="grid text-sm">
                                        <span class="text-lg">Adina G</span>
                                        <span>12 min ago</span>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <div class="h-2 w-2 rounded-full bg-orange-500"></div>
                                    <div>
                                        <span>In process</span>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>
        </div>
        <!-- over view section bro -->

    </div>
</body>
</html>