Data Analysis U I - Copy this React, Tailwind Component to your project

Design a visually stunning and highly intuitive user interface for a data analysis application that enables users to input a date range and visualize GT analog data over time. The UI should have a polished, high tech look with elegant animations, ensuring the experience feels immersive and fluid. Focus on creating an interface that’s both beautiful and user friendly, incorporating modern design principles. Interface Layout: Header Section: Design a sleek, modern header with the title "GT Analog Data Visualization" prominently displayed at the top of the screen. Use a high tech, minimalist font (think futuristic sans serif, possibly with custom kerning for uniqueness). Integrate subtle animations, such as a gentle fade in effect when the page loads, and the title could have a neon glow or gradient sheen that changes dynamically. Consider adding a slim, interactive date/time display or decorative element that enhances the sense of precision and real time analysis. Date Input Section: Create two clean, separated input fields labeled "Start Date" and "End Date," each with a smooth, flat design and subtle shadows for a floating effect. Use date and time pickers with animated dropdowns, featuring a stylish calendar UI that’s easy to navigate with large touchpoints, offering day, month, year, hour, and minute selection. Incorporate auto fill functionality to speed up user input, with smooth transition effects for dropdown opening/closing. Include interactive validation with elegant error highlights (e.g., smooth red border glow around the input field if the date format is incorrect). Include help tooltips near the date fields that briefly explain the required format (e.g., "Click to select a date in YYYY MM DD HH format"), with tooltips smoothly fading in/out when hovered. Submit Button: Design a large, prominent "Generate Chart" button centered below the date inputs. Apply gradient effects (e.g., deep blue to neon green) and hover animations where the button slightly elevates and changes hue when interacted with. Add a subtle glow or ripple effect upon click, to signify processing and give immediate feedback to the user. Ensure the button has clear, large typography, with bold text for easy legibility, possibly accompanied by an icon indicating chart creation. Chart Display: Main Chart Area: Dedicate a large, visually immersive space for the chart, placed centrally and surrounded by subtle padding to keep it uncluttered. The chart should feature high definition, sharp lines and curves, with a smooth, modern color palette. Use interactive elements: When hovering over the chart, include dynamic tooltips that appear with a bounce animation, showing detailed time and GT analog values for each point. Highlight key data points like min, max, and average with thin, contrasting horizontal lines. Each of these lines should have a glow effect and labels that hover above the chart, using distinct colors: neon green for the minimum, bright red for the maximum, and golden yellow for the average. Shade the region between the min and max lines with a soft gradient fill, adding visual depth and helping users understand the value range at a glance. Incorporate anomaly detection (spikes), where red markers appear at abnormal data points. These markers should have a pulse animation, drawing attention without being overly intrusive. A small bounce when hovering will make it feel more interactive. Enable zooming and panning on the chart: users can scroll to zoom in on specific time ranges or click and drag to pan across the timeline, with smooth animations keeping the experience fluid. Scrollable Text Area: Below the chart, place a sleek, bordered scrollable text area that displays details about the detected anomalies in chronological order. Use modern typography, with each entry being clearly defined (e.g., timestamp and corresponding GT analog value), organized in a clean list format. For entries where anomalies are detected, highlight them with bold text or color (e.g., red) for easy visibility. When new data is queried and spikes are found, use smooth scrolling animations or a slight "bounce" at the bottom to indicate updates. Sidebar / Menu Options: Consider adding a collapsible sidebar for additional options or settings, such as the ability to customize the chart display (e.g., changing the color scheme, toggling anomaly detection on/off, or adjusting the time range granularity). The sidebar should slide in/out with a smooth animation, with a minimalistic, icon based design to keep the interface clean. Use tooltips or labels for each icon in the sidebar to assist users in understanding the options without crowding the UI with text. Additional Features: Notifications/Alerts: When an error occurs (such as an invalid date range), display elegant modal dialogs or toast notifications with smooth fade in animations. These should be non intrusive, sliding in from the side or appearing briefly in the corner. Use animated icons for success, error, or information messages, making the feedback loop both clear and visually appealing. Example: When no anomalies are found, a light animation (such as a checkmark morphing from a circle) appears in a pop up message, confirming that no spikes were detected. Overall Design Elements: Color Scheme: Use a dark mode inspired palette with deep blues, grays, and blacks as the background, accented by vibrant neon colors like neon green, electric blue, and soft pinks/oranges for key highlights and interactive elements. Ensure high contrast for readability, especially for text on dark backgrounds, using soft white or light gray tones for primary text. Typography: Choose a sleek, modern sans serif font, with various weights to differentiate headers, buttons, and regular text. Use large, bold fonts for input labels and headers, ensuring clear legibility, while maintaining a professional look. For the chart and data display, use a condensed typeface that keeps the focus on the numbers and values, but with enough spacing for readability. Animation: Subtle transitions and animations should be a core part of the user experience. From hovering over buttons to chart interactions, each action should feel smooth and fluid. Implement a slight fade in effect for charts when they load, giving a sense of progression. Use progress indicators, such as a smooth bar or circular loading icon, that animate while the data is being fetched and processed, keeping the user informed. Responsiveness: Ensure the interface scales elegantly across all screen sizes, from large desktop monitors to mobile devices. The layout should be fully responsive, with charts adapting to smaller screens by adjusting margins and removing unnecessary elements, while ensuring all input fields remain accessible. Create a user interface that not only looks cutting edge but also provides a smooth and intuitive experience, with dynamic visual elements and responsive, real time interactions tailored for professional data analysis.