Time Picker - Copy this React, Tailwind Component to your project

am using the TimePicker component from the react time picker library in my React project, and I want to apply custom styles to it. Can you help me create a visually appealing design for the time picker? I would like the following: Appearance: A modern and clean design. Rounded corners with a subtle shadow. A background color that is light and easy on the eyes (e.g., soft gray or pastel shades). Typography: A clear and readable font for the time display (e.g., sans serif). Font size should be slightly larger for better readability (e.g., 16 18px). Color Scheme: A gentle border color that matches the background and doesn't distract from the input. Focus states should be clearly noticeable with a smooth color transition. Use contrasting colors for time selection (e.g., highlight the selected time with a soft color like light blue or green). Interactions: A smooth hover effect for the input field and dropdown elements. Include a subtle transition effect when opening the time picker dropdown. Focus on accessibility with visible outlines or shadow effects on input fields when focused. Position and Layout: Make sure the picker is aligned properly with surrounding form elements. Adjust the width to fit seamlessly in a standard form layout (e.g., full width or 80% width depending on the container). Please provide the necessary CSS or styled components code to achieve this. You can assume the TimePicker component will be placed within a form, so the styling should blend well with other form elements.