Document Evidence Extractor - Copy this React, Tailwind Component to your project

"Design-a-modern,-user-friendly-interface-for-a-Document-Evidence-Extractor-Tool-that-allows-users-to-upload-documents,-enter-a-query-or-topic,-and-extract-relevant-insights.-This-is-a-completely-new-design-concept-based-on-the-following-specifications:-Purpose-of-the-Interface:-The-tool-enables-users-to:-Upload-PDF,-TXT,-DOC,-or-DOCX-files.-Enter-a-query/topic-to-guide-evidence-extraction-(e.g.,-“Environment”-or-“Business”).-Process-the-documents-and-display-extracted-insights-in-an-organized-and-visually-engaging-way.-Design-Goals:-Simplicity:-The-design-should-feel-clean-and-uncluttered-while-offering-all-core-functionalities.-Modern-Aesthetics:-Use-sleek-typography,-intuitive-layouts,-and-interactive-elements-that-enhance-user-experience.-Responsiveness:-Ensure-the-design-works-seamlessly-across-desktop,-tablet,-and-mobile-devices.-Layout-and-Structure:-Header-Section:-Add-a-bold-and-clear-header-at-the-top-with-the-title-“Document-Evidence-Extractor”-and-a-tagline-below,-such-as-“Upload,-Query,-Extract-Insights”.-Include-a-small-logo-or-icon-representing-documents-or-evidence-extraction-to-create-a-professional-branding-touch.-Upload-Section:-Design-a-large,-prominent-upload-area-with-the-following-elements:-A-drag-and-drop-box-with-a-dashed-border,-rounded-corners,-and-a-clean,-central-upload-icon.-Text-inside-the-box:-“Drag-&-Drop-files-here-or-click-to-browse”-in-a-clear,-friendly-font.-Support-for-multiple-file-uploads-with-a-small-message-below:-“Supported-formats:-PDF,-TXT,-DOC,-DOCX”.-Display-uploaded-files-as-cards-below-the-upload-box:-Each-card-should-show-the-file-name,-size,-upload-timestamp,-and-a-small-status-icon-(e.g.,-a-green-checkmark-or-processing-spinner).-Add-a-dropdown-or-menu-icon-on-each-card-for-actions-(e.g.,-delete,-preview).-Query-Input-Section:-Place-a-prominent-query-input-field-above-or-next-to-the-"Process-Documents"-button:-Use-a-rounded-input-box-with-placeholder-text-like:-“Enter-your-topic-or-query-(e.g.,-Environment,-Health)...”.-Include-a-small-magnifying-glass-icon-or-topic-tag-icon-inside-the-input-field-to-emphasize-functionality.-Allow-users-to-select-a-query-from-predefined-topics-(via-a-dropdown-menu-or-suggestions)-or-type-their-own-custom-query.-Action-Button:-Create-a-large,-interactive-“Process-Documents”-button:-Use-a-bold-primary-color-(e.g.,-blue-or-green)-with-rounded-edges.-Add-an-engaging-hover-effect-(e.g.,-color-darkening-or-glow).-Include-a-subtle-loading-animation-when-clicked-(e.g.,-a-spinner-or-progress-bar).-Results-Section:-Below-the-input-and-upload-area,-design-a-results-section-for-extracted-evidence:-Display-extracted-insights-as-cards-or-lists-with-clear-headings-(e.g.,-Evidence-Text,-Source).-Add-small-tags-to-indicate-relevance-levels-(e.g.,-High,-Moderate,-Low)-with-color-coding-(e.g.,-green,-yellow,-orange).-Include-a-"Copy-to-Clipboard"-button/icon-on-each-card-for-easy-sharing.-Visual-Style:-Color-Palette:-Primary-Color:-A-soft,-professional-blue-(e.g.,-#5C9DFF)-or-green-(e.g.,-#4CAF50)-for-buttons-and-interactive-elements.-Secondary-Color:-A-light-gray-(e.g.,-#F5F5F5)-or-off-white-(e.g.,-#FAFAFA)-for-backgrounds.-Accent-Color:-A-vibrant-yellow-or-orange-(e.g.,-#FFAA33)-for-highlights-and-hover-effects.-Typography:-Use-clean,-modern-fonts:-Headings:-Montserrat-or-Roboto-Bold.-Body-Text:-Open-Sans-or-Lato.-Ensure-good-contrast-between-text-and-background-for-readability.-Interactive-Elements:-Buttons,-icons,-and-links-should-have-hover-animations-(e.g.,-slight-scaling,-color-changes).-Dragging-a-file-into-the-upload-box-triggers-a-subtle-glow-or-border-animation.-Additional-Features:-Feedback-and-Notifications:-Show-a-confirmation-toast-message-(e.g.,-“File-uploaded-successfully!”)-after-a-file-is-added.-Add-an-error-message-if-an-unsupported-file-type-is-uploaded.-Accessibility:-Ensure-all-elements-are-keyboard-and-screen-reader-friendly.-Use-high-contrast-color-options-for-accessibility.-Responsive-Design:-On-smaller-screens:-Stack-input-fields-and-buttons-vertically.-Simplify-icons-and-labels-for-a-clean,-uncluttered-mobile-view.-Output-Requirements:-Provide-a-high-fidelity-mockup-of-the-redesigned-interface,-including-desktop-and-mobile-versions.-Ensure-all-specified-elements-(e.g.,-upload-box,-query-input,-results-section)-are-visually-cohesive-and-easy-to-understand.-Demonstrate-hover-effects,-animations,-and-responsive-layouts-in-the-mockup."