Admin Panel - Copy this React, Tailwind Component to your project
Design a clean, modern eCommerce admin panel interface for managing products. The layout includes a sidebar, a top navigation bar, and a main content area displaying products in a grid format. Sidebar: The sidebar is positioned on the left and includes the logo at the top labeled 'Admin eCommerce' with a small icon beside it. Below the logo are the following menu items in a vertical list: 'Dashboard' 'Products' (highlighted in blue as the active selection), with submenu items including 'Add product', 'Product list', 'Categories', and 'Brands'. 'Orders', 'Customers', 'Statistics', 'Reviews', and 'Transactions' (with a red badge indicating 8 notifications). 'Sellers', 'Hot offers', 'Appearance', and 'Settings'. Each menu item uses an icon and text for easy identification. Top Navigation Bar: At the top, there is a search bar on the left with placeholder text 'Search...'. On the right side of the top bar, there are three icons: a bell for notifications, a gear for settings, and a user avatar with a dropdown menu when clicked (with a profile photo and user name). Main Content: Title Section: The main content area starts with a title 'Products grid' in bold text. Below the title, there is a search bar with the text 'Search' and a dropdown filter on the right for 'Category' and 'Last added'. To the far right, there are two buttons: 'Export' (gray) and '+ Create new' (blue), both placed above the product grid. Product Grid: The product grid displays multiple products, each in its own card format with a white background. Each card contains: A product image. The product name in bold text, followed by the price in black (e.g., 'T shirt for Men' priced at '$90.00'). Two buttons at the bottom of each card: 'Edit' (gray) and 'Delete' (red), with corresponding icons. The products shown include a 'T shirt for Men', 'Travel Bag Jeans', 'Jeans shorts', 'Sofa for interior', 'Leather Wallet', 'GoPro Camera 4K', 'Headset Xiaomi', 'WinterJacket', and others. Prices vary, with most products displayed with their images. The design follows a clean, minimalist layout with ample spacing between elements and soft colors like white, gray, and light blue. Buttons and icons are flat and modern, providing a highly functional and professional look for managing eCommerce products.
