Product Dropdown - Copy this React, Tailwind Component to your project

import-React,-{-useState,-useRef,-useEffect-}-from-"react";-import-{-HiChevronDown-}-from-"react-icons/hi";-import-{-FiBarChart2,-FiMessageSquare,-FiShield,-FiLink,-FiZap,-FiPlay,-FiPhone,-FiPieChart,-FiDatabase,-FiTrendingUp,-FiUsers,-FiGlobe,-FiMonitor,-FiLayers-}-from-"react-icons/fi";-const-ProductDropdown-=-()-=>-{-const-[isOpen,-setIsOpen]-=-useState(false);-const-dropdownRef-=-useRef(null);-const-menuItems-=-[-{-label:-"Analytics",-description:-"Get-a-better-understanding-of-your-traffic",-icon:-<FiBarChart2-/>,-link:-"#",-subItems:-[-"User-Analytics",-"Traffic-Analysis",-"Conversion-Tracking",-"Behavior-Flow",-"Goal-Monitoring",-"Custom-Reports",-"Real-time-Data",-"Audience-Insights",-"Campaign-Performance",-"Event-Tracking"-]-},-{-label:-"Business-Intelligence",-description:-"Make-data-driven-decisions",-icon:-<FiPieChart-/>,-link:-"#",-subItems:-[-"Data-Visualization",-"Predictive-Analytics",-"Market-Analysis",-"Revenue-Insights",-"Customer-Segmentation",-"ROI-Tracking",-"Competitive-Analysis",-"Performance-Metrics",-"Sales-Analytics",-"Growth-Metrics"-]-},-{-label:-"Data-Management",-description:-"Organize-and-manage-your-data-effectively",-icon:-<FiDatabase-/>,-link:-"#",-subItems:-[-"Data-Storage",-"Data-Processing",-"Data-Security",-"Backup-Solutions",-"Data-Integration",-"Data-Cleansing",-"Database-Management",-"Data-Governance",-"API-Management",-"Data-Migration"-]-},-{-label:-"Performance-Optimization",-description:-"Optimize-your-system-performance",-icon:-<FiTrendingUp-/>,-link:-"#",-subItems:-[-"Speed-Optimization",-"Resource-Management",-"Load-Balancing",-"Cache-Management",-"Server-Optimization",-"Code-Performance",-"Memory-Management",-"Network-Optimization",-"Database-Tuning",-"System-Monitoring"-]-},-{-label:-"User-Management",-description:-"Manage-your-user-base-effectively",-icon:-<FiUsers-/>,-link:-"#",-subItems:-[-"User-Roles",-"Access-Control",-"User-Authentication",-"Profile-Management",-"User-Groups",-"Permission-Settings",-"User-Activity",-"Account-Security",-"Single-Sign-On",-"User-Support"-]-},-{-label:-"Global-Solutions",-description:-"Expand-your-reach-globally",-icon:-<FiGlobe-/>,-link:-"#",-subItems:-[-"Multi-language-Support",-"Global-CDN",-"Regional-Settings",-"Currency-Management",-"Time-Zone-Handling",-"International-SEO",-"Global-Compliance",-"Market-Localization",-"Cross-border-Solutions",-"Global-Analytics"-]-},-{-label:-"System-Monitoring",-description:-"Monitor-your-system-health",-icon:-<FiMonitor-/>,-link:-"#",-subItems:-[-"Health-Checks",-"Alert-Management",-"Log-Analysis",-"Error-Tracking",-"Performance-Monitoring",-"Resource-Usage",-"Uptime-Monitoring",-"Security-Monitoring",-"API-Monitoring",-"Event-Logging"-]-},-{-label:-"Integration-Hub",-description:-"Connect-with-third-party-tools",-icon:-<FiLink-/>,-link:-"#",-subItems:-[-"API-Integration",-"Plugin-Management",-"Third-party-Apps",-"Custom-Integration",-"Data-Sync",-"Webhook-Management",-"OAuth-Setup",-"Integration-Analytics",-"Connection-Status",-"Integration-Security"-]-},-{-label:-"Platform-Services",-description:-"Core-platform-functionalities",-icon:-<FiLayers-/>,-link:-"#",-subItems:-[-"Service-Registry",-"Load-Distribution",-"Service-Discovery",-"API-Gateway",-"Message-Queue",-"Service-Mesh",-"Container-Management",-"Configuration-Management",-"Service-Analytics",-"Platform-Security"-]-},-{-label:-"Automation",-description:-"Automate-your-workflows",-icon:-<FiZap-/>,-link:-"#",-subItems:-[-"Workflow-Automation",-"Task-Scheduling",-"Process-Automation",-"Email-Automation",-"Marketing-Automation",-"Report-Generation",-"Data-Synchronization",-"Alert-Automation",-"Backup-Automation",-"Integration-Automation"-]-}-];-useEffect(()-=>-{-const-handleClickOutside-=-(event)-=>-{-if-(dropdownRef.current-&&-!dropdownRef.current.contains(event.target))-{-setIsOpen(false);-}-};-document.addEventListener("mousedown",-handleClickOutside);-return-()-=>-document.removeEventListener("mousedown",-handleClickOutside);-},-[]);-const-handleKeyDown-=-(event)-=>-{-if-(event.key-===-"Escape")-{-setIsOpen(false);-}-};-return-(-<div-className="relative-inline-block"-ref={dropdownRef}-onKeyDown={handleKeyDown}>-<button-type="button"-id="product-menu-button"-className="relative-flex-items-center-gap-x-1-text-sm-font-semibold-text-gray-900-hover:text-gray-600-focus:outline-none-transition-colors-duration-200"-aria-expanded={isOpen}-onClick={()-=>-setIsOpen(!isOpen)}->-Product-<HiChevronDown-className={`size-5-flex-none-text-gray-400-transition-transform-duration-200-${isOpen-?-"rotate-180"-:-""}`}-/>-</button>-{isOpen-&&-(-<div-id="flyout-menu"-className="absolute-left-1/2-top-full-z-50-mt-3-w-screen-max-w-[95vw]-sm:max-w-[90vw]-md:max-w-[85vw]-lg:max-w-[80vw]--translate-x-1/2-transform-overflow-hidden-rounded-3xl-bg-white-shadow-xl-ring-1-ring-gray-900/5-transition-all-duration-200"-role="menu"-aria-orientation="vertical"-aria-labelledby="product-menu-button"->-<div-className="grid-grid-cols-1-sm:grid-cols-2-md:grid-cols-3-lg:grid-cols-5-gap-4-p-4-overflow-y-auto-max-h-[80vh]">-{menuItems.map((item,-index)-=>-(-<div-key={index}-className="space-y-4-hover:bg-gray-50-rounded-xl-transition-colors-duration-200-p-2">-<div-className="group-relative-flex-items-center-gap-x-4-rounded-lg-p-3-text-sm-leading-6">-<div-className="flex-h-11-w-11-flex-none-items-center-justify-center-rounded-lg-bg-gray-100-group-hover:bg-white-transition-colors-duration-200">-<div-className="size-6-text-gray-600-group-hover:text-indigo-600-transition-colors-duration-200">-{item.icon}-</div>-</div>-<div-className="flex-auto">-<div-className="text-sm-font-semibold-text-gray-900-group-hover:text-indigo-600-transition-colors-duration-200">-{item.label}-</div>-<p-className="mt-1-text-xs-text-gray-600">{item.description}</p>-</div>-</div>-<div-className="pl-16-space-y-2">-{item.subItems.map((subItem,-subIndex)-=>-(-<a-key={subIndex}-href="#"-className="block-text-xs-text-gray-600-hover:text-indigo-600-transition-colors-duration-200-py-1"->-{subItem}-</a>-))}-</div>-</div>-))}-</div>-<div-className="grid-grid-cols-2-divide-x-divide-gray-900/5-bg-gray-50">-<a-href="#"-className="flex-items-center-justify-center-gap-x-2.5-p-3-text-sm-font-semibold-text-gray-900-hover:bg-gray-100-transition-colors-duration-200"->-<FiPlay-className="size-5-flex-none-text-gray-400"-/>-Watch-Demo-</a>-<a-href="#"-className="flex-items-center-justify-center-gap-x-2.5-p-3-text-sm-font-semibold-text-gray-900-hover:bg-gray-100-transition-colors-duration-200"->-<FiPhone-className="size-5-flex-none-text-gray-400"-/>-Contact-Sales-</a>-</div>-</div>-)}-</div>-);-};-export-default-ProductDropdown;