A
Anonymous

Inquiry Page - Copy this React, Tailwind Component to your project

Design-a-modern,-professional,-and-mobile-compatible-web-page-component-with-the-following-elements:-Search-Bar:-Place-a-sleek,-minimal-search-bar-at-the-top-of-the-page-with-a-magnifying-glass-icon-to-the-left.-The-search-bar-should-have-animated-placeholder-text-that-subtly-fades-in-when-the-user-clicks-it.-Use-a-soft-gradient-background-for-the-search-bar,-transitioning-from-light-blue-to-white,-and-a-clear-border-to-make-it-stand-out.-Header:-The-header-should-display-'Rake-Inquiries'-in-a-bold-and-professional-font-with-a-small-list/document-icon-next-to-it.-Apply-a-gradient-background-(e.g.,-blue-to-purple)-for-the-header-with-the-text-in-white-for-high-contrast.-Inquiry-Cards:-Below-the-search-bar,-display-a-list-of-rake-inquiries-in-compact,-card-style-containers.-Each-inquiry-card-should-contain-the-following-details,-with-small-icons-next-to-the-text:-Rake-ID:-Represented-by-a-small-ID-card-icon.-Client-Name:-Displayed-with-a-small-person-icon.-Date:-Use-a-calendar-icon-next-to-the-date.-Origin-&-Destination:-Represented-by-location-pin-icons.-Commodities:-Use-a-box-icon-or-truck-icon.-The-cards-should-be-compact,-smaller-in-height-with-rounded-corners,-and-have-enough-padding-for-readability.-Use-a-multi-color-approach-for-each-card:-Use-soft-pastel-shades-like-light-blue,-mint-green,-or-lavender-for-different-cards-to-make-them-distinct-but-harmonious.-Alternate-between-colors-in-the-list-for-easy-visual-separation.-For-example,-one-card-can-have-a-light-blue-background,-while-the-next-one-has-mint-green,-and-so-on.-Add-subtle-hover-effects:-When-hovering-over-a-card,-the-background-color-should-change-slightly,-e.g.,-turning-a-shade-darker-or-lighter-for-emphasis.-Icons-and-Details:-The-icons-in-each-inquiry-card-should-be-small-and-simple,-using-flat-design-to-ensure-clarity-and-modern-aesthetic.-The-text-should-be-clean-and-legible,-with-bold-headings-(e.g.,-Rake-ID,-Client-Name)-and-lighter-text-for-details-(e.g.,-date,-origin,-commodities).-Each-inquiry-card-should-be-separated-by-a-thin-line-or-subtle-shadow-to-visually-distinguish-them.-Interactive-Animations:-Hover-Effects:-On-hover,-the-inquiry-cards-should-gently-elevate-with-a-smooth-shadow-or-slightly-change-background-color-to-indicate-interactivity.-Load-Transition:-When-the-page-loads,-the-inquiry-cards-should-slide-in-from-the-left-or-fade-in-with-a-smooth-animation-for-a-dynamic-and-engaging-feel.-Mobile-Compatibility:-The-layout-should-be-fully-responsive,-ensuring-that-the-inquiry-cards-stack-vertically-on-smaller-screens,-and-the-search-bar-remains-easily-accessible.-Cards-should-maintain-their-compact-size-on-mobile,-with-touch-friendly-spacing-between-clickable-elements.-The-header-and-search-bar-should-stay-fixed-at-the-top-of-the-page-for-easy-access.-Color-Palette:-Use-a-multi-color-design-with-pastel-tones-like-light-blue,-mint-green,-lavender,-and-soft-yellow-to-make-each-inquiry-card-stand-out-while-maintaining-a-clean-and-professional-look.-Use-darker-accent-colors-for-icons-(e.g.,-dark-gray,-navy-blue)-and-text-to-maintain-legibility-and-create-contrast.-The-search-bar-and-header-should-have-softer-gradient-backgrounds-to-ensure-the-page-doesn't-feel-too-busy.-The-design-should-be-clean,-modern,-and-user-friendly,-with-a-visually-engaging-color-scheme-and-smooth-animations,-while-keeping-the-inquiry-cards-compact-and-easy-to-navigate."

Prompt
Component Preview

About

InquiryPage - A sleek search bar, compact inquiry cards with icons, and a responsive layout, all professionally built with React and Tailwind. Get instant access!

Share

Last updated 1 month ago