Text Input - Copy this React, Tailwind Component to your project

Design a sleek and modern text input field for a UI interface. The input box should have smooth, slightly rounded corners (around 8 12px radius), giving it a soft and friendly appearance. It should have a subtle shadow beneath to create a slight elevation effect, conveying depth. Use a light background color for the input field, such as white or a soft pastel shade, with a border in a light gray (#D1D1D1) or a muted tone. When focused, the border should glow with a primary color (e.g., #4A90E2 or a gentle blue) to indicate active state. Add padding inside the input (e.g., 12px on all sides) to make the text feel breathable. Include placeholder text in a medium gray tone (#B0B0B0) that disappears as the user types. The font should be a modern sans serif, such as Open Sans or Roboto, and the text size around 16px for readability. For interaction feedback, when an input error occurs, the border should turn red (#FF4D4D) and display a small icon or message below indicating the issue. This input field should be visually responsive, adjusting well to both desktop and mobile views. Use neutral but elegant styling that fits well into healthcare, booking, or productivity applications.