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.
