O T P Verification - Copy this React, Tailwind Component to your project

Create a modern and responsive OTP verification page. The design should be clean, professional, and user friendly with a focus on simplicity and elegance. The page should feature the following: Background: Use a gradient background with soft, subtle colors (e.g., a gradient from light blue to white) to create a welcoming atmosphere. Main Card: A center aligned verification card with rounded corners, shadow effects, and smooth transitions on hover. The card should have a professional feel, with ample white space to make the elements stand out. Header: Display a bold, clean title for "OTP Verification" at the top of the card with a modern sans serif font. Below the title, add a brief subtitle explaining that the user needs to enter the OTP sent to their email or phone number. Input Fields: Design 6 stylish, individual OTP input boxes that are aligned horizontally, with a light border and subtle focus effects (e.g., a blue border when an input is focused). Ensure there is clear spacing between each input. Verification Button: Create a large, prominent button below the inputs with rounded edges, using vibrant colors like blue or green. The button should have a smooth hover effect (e.g., slightly larger on hover) and a shadow effect to give it depth. Loader/Message Area: Include a section that dynamically displays messages for success or error (e.g., “OTP Verified Successfully” or “Invalid OTP”). Use FontAwesome icons, like a check mark for success or an error cross for failure, and display the messages with appropriate colors (green for success, red for error). Link to Resend OTP: Add a link below the button to allow users to resend the OTP if they didn't receive it. The link should use a subtle hover effect with color transitions, perhaps from gray to blue.