index.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">
    <link rel="icon" href="./components/images/LOGO Shape.png">
    <title>Elixir-Clone</title>
    <link rel="stylesheet" href="./components/style.css">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <!-- starting main/primary div -->
    <div class="flex main__div p-3">
            <!-- login  main div -->

        <div class="w-2/5  justify-between space-y-24 ">

            <!-- image and info div -->
                <div class="flex items-center m-5">
                    <img src="./components/images/LOGO Shape.png" alt="images">
                    <span class="text-2xl font-bold">Elixer . DS</span>
                </div>
    
                <!-- sign up form div -->
                <div class="grid justify-center">

                    <div class="grid justify-center w-100 items-center">

                        <span class="font-bold text-2xl">Login To platform</span>
                        <span class="text-md mt-6">Email Address *</span>

                        <!-- icons in placeholder -->
                        <input type="text" placeholder="name@domain.com" class="main__email h-12 rounded-md border-2">

                        <span class="text-md mt-6">Password *</span>
                        <input type="password" placeholder="Strong Password" class="main__pass h-12 rounded-md border-2">

                        <a href="#" class="text-center py-4 text-slate-400">
                            <span class="italic">Forgot Password ?</span>
                        </a>
                        
                        <div class="h-12 w-96 rounded-2xl flex justify-center items-center main__button text-white"">
                            <a href="#">Login</a>
                        </div>

                        <span class="text-center py-4 text-slate-400">Or connect With social Account</span>

                            <div class="flex space-x-2 text-center">

                                <div class="rounded-2xl h-12 border-2 cursor-pointer w-1/2 flex justify-center items-center bg-white">
                                    <img src="./components/images/Union.png" class="px-2"/>Google
                                </div>

                                <div class="rounded-2xl h-12 border-2 cursor-pointer w-1/2 flex justify-center items-center bg-white">
                                    <img src="./components/images/Union2.png"class="px-2"/>Facebook
                                </div>

                            </div>

                    </div>

                </div>
    
                <!-- dont forget to sign form -->
                <div class="flex justify-center">

                    <span>Dont have an account</span>

                    <a href="#">
                        <span class="ml-1 main__signup"> Sign up</span>
                    </a>

                </div>

        </div>

        <!-- chart main div -->
        <!-- 2nd section -->
        <div class="chart__div w-3/5">
            
            <!-- chart__div navbar -->
            <div class="m-8">
                <img src="./components/images/Group 1.png" alt="">
            </div>

            <!-- graph div -->
            <div class="flex mx-12 justify-center">

                <div class="border-2 bg-white w-80 rounded-2xl p-2">

                    <div class="flex justify-between">
                        <span class="text-slate-500">Active Revenue</span>
                        <img src="./components/images/more-horizontal.png" alt="">
                    </div>

                    <div class="font-bold text-2xl mt-1">
                        <span>$28291</span>
                    </div>

                    <div class=" flex space-x-6 mt-16 items-end">
                        <!-- charts -->
                        <div class="h-16 w-8 chart__color animation__1 rounded-2xl"></div>
                        <div class="h-20 w-8 chart__color animation__3 rounded-2xl"></div>
                        <div class="h-28 w-8 chart__color  rounded-2xl"></div>
                        <div class="h-16 w-8 chart__color animation__2 rounded-2xl"></div>
                        <div class="h-28 w-8 chart__color animation__3 rounded-2xl"></div>
                        <div class="h-16 w-8 chart__color animation__1 rounded-2xl"></div>
                        <div class="h-24 w-8 chart__color animation__2 rounded-2xl"></div>

                    </div>

                    <div class="flex space-x-8 mt-2">
                        <span>15</span>
                        <span>16</span>
                        <span>17</span>
                        <span>18</span>
                        <span>19</span>
                        <span>20</span>
                        <span>21</span>
                    </div>

                </div>

                <!-- 2nd total revenue div -->
                <div class="p-2 border-2 h-32 rounded-2xl bg-white m-5">

                    <div class=" justify-around flex space-x-12">

                        <span class="text-slate-500">Total Revenue</span>

                        <div class="bg-green-100 flex space-x-2 text-green-600">
                            <img src="./components/images/trending-up.png" alt="">
                            <span>12.6%</span>
                        </div>
                        
                    </div>

                    <div class="grid pt-3">
                        <span class="text-2xl font-bold">$2313</span>
                        <span class="pt-2">23 orders</span>
                    </div>
                    
                </div>

            </div>

            <!-- manage team and total expense section stats -->
            <div class="p-5 mx-8 flex justify-center">

                <div class= "w-96 rounded-2xl space-y-2 border-2 bg-white grid">
                    <div class="text-2xl font-bold border-b-2 border-slate-400 w-96 p-4 text-center">
                        <span class="">Manage Team</span>
                    </div>
                    <div>
                        <span class="p-2">Recent</span>
                    </div>
                    <!-- team images -->
                    <div class="flex justify-around w-96 -py-1">
                        
                            <div class="rounded-2xl h-12 w-12 chart__team border-2">
                                <img src="./components/images/plus.png" alt="image">
                            </div>
    
                            <div class="rounded-full h-12 w-12  chart__team">
                                <img src="./components/images/Avatar.png" alt="">
                            </div>
    
                            <div class="rounded-full h-12 w-12  chart__team">
                                <img src="./components/images/Avatar (1).png" alt="">
                            </div>
    
                            <div class="rounded-full h-12 w-12  chart__team">
                                <img src="./components/images/Avatar (2).png" alt="">
                            </div>
    
                            <div class="rounded-full h-12 w-12  chart__team">
                                <img src="./components/images/Avatar (3).png" alt="">
                            </div>
    
                            <div class="rounded-full h-12 w-12  chart__team">
                                <img src="./components/images/Avatar (4).png" alt="">
                            </div>
                    </div> 
                       <!-- team name div -->
                       <div class="flex justify-center space-x-4">
                            <span>Add</span>
                            <span>Dragos</span>
                            <span>Adrina</span>
                            <span>Robert</span>
                            <span>Joy</span>
                            <span>Monica</span>
                       </div>
                </div>

                <!-- manage team div -->
                <div class="bg-white p-2 border-2 rounded-2xl -mt-36 -ml-8 grid items-center h-60">
                    
                    <div class="flex justify-between">
                        <span class="font-bold text-2xl">$63910.25</span>
                        <span>
                            <img src="./components/images/more-horizontal.png" alt="image">
                        </span>
                    </div>

                    <div>
                        <span>Total Expences Q2</span>
                    </div>

                    <!-- charts no images ok-->
                    <div class="flex space-x-8 items-end justify-around">

                        <div class="grid  items-center space-y-2">
                            <div class="h-16 w-10 chart__color rounded-lg animation__2"></div>
                            <span>May</span>
                        </div>

                        <div class="grid  text-center space-y-2">
                            <div class="h-24 w-10 chart__color rounded-lg"></div>
                            <span>June</span>
                        </div>

                        <div class="grid  text-center space-y-2">
                            <div class="h-16 w-10 chart__color__secondary rounded-lg animation__2"></div>
                            <span>July</span>
                        </div>

                        <div class="grid  text-center space-y-2 ">
                            <div class="h-24 w-10 chart__color__secondary rounded-lg animation__1"></div>
                            <span>August</span>
                        </div>
                    </div>
                </div>
                <!-- manage team div over -->

                
            </div>
            <!-- tickmark done -->
            <div class="bg-red-500 flex justify-center ">
                <div class="rounded-full chart__color  ml-72 -mt-20">
                    <img src="./components/images/right_tick.png" alt="image" class="p-8">
                </div>
            </div>

            <!-- better result with design system -->
            <div class="grid m-5  w-100 space-y-2 mx-28">
                <span class="text-2xl font-bold text-center">Better results with the Design System</span>

                <span class="text-center">
                    Design systems are the secret to creating beautiful, functional design. 
                    Design systems are made up of all the things you need to make a website or app
                     look great and function well.  
                </span>

                <div class="flex justify-between space-x-4 mx-80 items-center">
                    <span class="h-3 w-12 chart__color  rounded-2xl"></span>
                    <span class="h-3 w-3 chart__scrool rounded-full bg-neutral-300"></span>
                    <span class="h-3 w-3 chart__scrool rounded-full bg-neutral-300"></span>
                    <span class="h-3 w-3 chart__scrool rounded-full bg-neutral-300"></span>
                </div>

            </div>

        </div>

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