Rake Inquiries Page - Copy this React, Tailwind Component to your project
Design-a-modern,-elegant,-and-mobile-optimized-web-page-component-for-Rake-Inquiries-with-the-following-elements:-Search-Bar:-Place-a-clean-and-minimal-search-bar-at-the-top-of-the-page-with-a-simple,-refined-magnifying-glass-icon-on-the-left-side-(in-a-sleek,-bright-color-like-teal-or-navy-blue).-Add-animated-placeholder-text-inside-the-search-bar-that-reacts-to-clicks-(e.g.,-text-shrinking-or-changing-color-subtly).-The-search-bar-should-have-a-soft-gradient-background-(e.g.,-light-gray-to-white)-with-smooth,-rounded-edges-for-a-refined,-polished-appearance.-Header:-The-header-should-read-'Rake-Inquiries'-in-an-elegant,-bold-serif-font-for-a-professional-yet-stylish-look.-Use-a-subtle-icon-next-to-the-text,-such-as-a-minimal-clipboard-or-document-icon-in-a-clean,-refined-color-(like-soft-gray-or-navy-blue).-Keep-the-header-background-solid-white-or-a-very-soft-neutral-color-(like-light-gray),-with-the-text-and-icon-in-dark-gray-or-black-to-maintain-clarity-and-sophistication.-Inquiry-Cards:-Below-the-search-bar,-display-a-list-of-rake-inquiries-in-simple,-white-or-light-gray-card-style-containers.-The-cards-should-have-a-minimal-design-with-no-bright-background-colors,-maintaining-a-clean,-elegant-look.-Each-card-should-contain-the-following-key-details,-with-colorful,-clean,-flat-icons-next-to-the-text:-Rake-ID:-A-subtle-ID-card-icon-in-navy-blue-or-teal.-Client-Name:-A-small-user-icon-in-soft-coral-or-light-green.-Date:-Represent-the-date-with-a-calendar-icon-in-pastel-purple-or-gray.-Origin-&-Destination:-Use-location-pin-icons-in-dark-blue-or-gray.-Commodities:-A-simple-box-or-truck-icon-in-muted-orange-or-soft-yellow.-The-icons-should-be-small,-simple,-and-clean,-ensuring-they-complement-the-overall-minimalist-aesthetic.-Each-inquiry-card-should-have-rounded-corners-and-a-thin,-subtle-shadow-for-depth,-without-feeling-overly-busy.-Keep-the-card-height-compact-but-large-enough-for-clarity-and-ease-of-reading.-Interactive-Animations:-Hover-Effects:-When-hovering-over-a-card,-the-background-of-the-card-can-gently-change-to-a-slightly-darker-shade-of-gray,-and-the-icons-could-subtly-animate-(e.g.,-increase-in-size-or-change-in-color).-Smooth-Animations:-When-the-page-loads,-the-inquiry-cards-should-slide-in-gently-from-the-left-or-fade-in-for-a-dynamic-yet-understated-feel.-Icons-can-gently-pulse-or-animate-when-hovered-over-to-encourage-interaction.-Mobile-Compatibility:-The-layout-should-be-fully-responsive,-with-inquiry-cards-stacking-vertically-on-mobile-devices.-Ensure-the-content-remains-easy-to-read-and-interact-with.-The-search-bar-and-header-should-remain-at-the-top-of-the-page-for-easy-access,-with-touch-friendly-buttons-and-spacing-between-clickable-elements-for-mobile-users.-The-icons-should-remain-appropriately-sized-and-legible-on-smaller-screens,-while-maintaining-their-minimalist-look.-Color-Palette:-Keep-the-overall-design-neutral-and-refined-with-a-soft,-minimal-palette.-Use-subtle-accent-colors-for-icons-(e.g.,-navy-blue,-teal,-coral,-muted-orange,-pastel-purple)-to-add-vibrancy-without-overwhelming-the-design.-The-inquiry-cards-should-be-white-or-light-gray-for-a-clean,-professional-look.-Use-dark-gray-or-black-text-for-all-content,-ensuring-maximum-clarity-and-readability.-The-design-should-feel-polished-and-sophisticated,-with-a-focus-on-subtlety-and-refinement.-Additional-Design-Notes:-Maintain-a-minimalist-approach-overall-with-ample-whitespace-for-a-clean,-uncluttered-appearance.-Icons-should-be-consistent-in-style-(flat-design,-simple-lines)-to-ensure-the-page-feels-cohesive.-The-overall-layout-should-emphasize-clarity-and-ease-of-use,-with-intuitive-interactions-and-a-professional-aesthetic-that-reflects-a-modern,-high-end-user-experience.
