Smart Irrigation System - Copy this React, Tailwind Component to your project

Design a modern and intuitive mobile UI for a "Smart Irrigation System" that includes the following elements: Card Design for Irrigation Settings: Title: "Smart Irrigation System" (centered at the top of the card). Dropdown Menu: Three selectable options "Manual," "Semi Auto," and "Full Auto." Use a dropdown with smooth animations for selection. Soil Moisture Data: Display a circular progress bar or gauge showing the current soil moisture level as a percentage (e.g., 45%). Use color coding: blue for adequate moisture, yellow for moderate, and red for dry. Navigation Bar (Mobile Friendly): Include a bottom navigation bar with three main icons: Home (icon: house) Irrigation Settings (icon: water droplet or gear) Statistics (icon: graph) Highlight the active tab with a distinct color (e.g., blue). Color Scheme: Background: Light gradient (soft blue to light green). Text: Dark gray for headings, lighter gray for labels. Buttons and Dropdown: Primary color (green) with rounded edges and hover effects. Additional Features (Optional): A small info button (icon: “i”) next to the soil moisture data for detailed insights. Use subtle shadows and elevation for a clean, modern look. Ensure the design is clean, user friendly, and optimized for small screens, with all text and interactive elements easily tappable.