Cryptography Tool - Copy this React, Tailwind Component to your project
Develop-a-fully-functional-and-responsive-web-application-using-ReactJS-and-Tailwind-CSS-for-encryption-and-security-related-functionalities.-The-application-should-include-the-following-key-features:-###-1.-**Home-Page**---Design-a-dashboard-like-homepage-with-Tailwind-CSS-for-modern-styling.---Include-clickable-cards-or-buttons-for-navigation-to-key-functionalities:---Basic-Algorithms---Symmetric-Encryption---Asymmetric-Encryption---Hashing---Digital-Signatures---Add-a-brief-description-for-each-feature,-along-with-icons-or-illustrations-for-a-professional-look.-----###-2.-**Basic-Algorithms-(Shift-and-Substitution)**---Create-a-form-with:---An-input-field-for-plaintext.---Dropdown-menu-for-selecting-algorithms-(e.g.,-Shift-Cipher,-Substitution-Cipher).---Input-fields-for-algorithm-specific-parameters-(e.g.,-shift-value-or-substitution-key).---Buttons-styled-with-Tailwind-for-"Encrypt"-and-"Decrypt."---Dynamically-display-the-results-below-the-form-with-Tailwind-utility-classes-for-styling.-----###-3.-**Symmetric-Encryption**---Add-a-toggle-button-to-switch-between-file-and-text-input.---Use-dropdowns-for:---Selecting-symmetric-algorithms-(AES,-DES,-TripleDES,-etc.).---Choosing-modes-(CBC,-ECB,-etc.).---Selecting-padding-options-(PKCS5,-NoPadding,-etc.).---Provide-key-management:---Input-field-for-manual-key-entry-or-button-to-generate-a-new-key.---Buttons-for-"Save-Key"-and-"Load-Key"-(file-upload/download).---Include-buttons-for-"Encrypt"-and-"Decrypt,"-styled-with-Tailwind-for-hover-and-focus-effects.---Display-results-in-a-styled-text-area-or-file-download-section.-----###-4.-**Asymmetric-Encryption**---Build-a-panel-with:---A-text-input-field-for-short-plaintext.---Dropdown-to-select-algorithms-(e.g.,-RSA).---Key-management-features:---Input-fields-for-uploading-public-and-private-keys.---Button-to-generate-new-keys-(with-length-options).---Buttons-for-saving-keys-to-a-file.---Buttons-for-"Encrypt"-and-"Decrypt."---A-styled-result-section-for-the-output.-----###-5.-**Hashing**---Provide-a-form-to-upload-files-or-input-text.---Dropdown-menu-for-selecting-hash-algorithms-(SHA-256,-MD5,-etc.).---Dynamically-display-the-hash-result-below-the-form,-styled-with-Tailwind.---Include-a-button-to-"Save-Hash-Result"-as-a-file.-----###-6.-**Digital-Signatures**---Add-a-panel-for:---Input-fields-for-short-text-or-file-uploads.---Options-to-upload-private-keys-for-signing-and-public-keys-for-verification.---Buttons-for-"Sign"-and-"Verify-Signature,"-with-success/error-feedback.---Separate-sections-to-display-the-generated-signature-and-verification-status.-----###-7.-**Key-Management**---Build-a-reusable-component-for-key-generation-and-handling:---Generate-keys-with-specific-lengths-supported-by-the-selected-algorithm.---Save-keys-to-a-file-or-display-them-in-Base64-format.---Upload-existing-keys-from-the-user's-machine-with-validation.-----###-8.-**Global-Features**-####-Layout-and-Navigation:---Use-**React-Router**-for-page-navigation.---Design-a-responsive-**sidebar**-or-**top-navigation-bar**-with-Tailwind-for-seamless-access-to-features.---Add-a-**footer**-with-links-to-"About,"-"Help,"-and-"Contact."-####-Styling:---Use-**Tailwind-CSS**-for-consistent-and-modern-UI-styling.---Apply-utility-classes-for-spacing,-typography,-colors,-and-hover/focus-states.---Ensure-responsiveness-with-Tailwind’s-grid-and-flexbox-utilities.---Include-dark-mode-support-using-Tailwind’s-`dark:`-variants.-####-Error-Handling:---Implement-form-validation-and-feedback-using-Tailwind's-alert-and-badge-styles.---Display-error-messages-in-modals-or-toast-notifications-for-invalid-inputs-or-missing-parameters.-----###-9.-**Technical-Requirements**---Code-structure:---Use-React-functional-components-with-Hooks.---Modularize-each-feature-into-its-own-reusable-component.---State-management:---Use-React-Context-API-or-a-state-management-library-like-Redux-if-needed.---Accessibility:---Follow-ARIA-standards-and-ensure-compatibility-with-screen-readers.---Documentation:---Include-comments-for-each-React-component-and-Tailwind-class-usage.---Performance:---Optimize-for-file-uploads-and-cryptographic-operations.---Responsiveness:---Ensure-the-UI-is-fully-responsive-for-desktop,-tablet,-and-mobile-views.-Deliver-the-full-ReactJS-codebase-with-Tailwind-CSS-integrated,-following-the-best-practices-for-clean,-maintainable,-and-scalable-development.
