Header - Copy this React, Tailwind Component to your project

Create-a-Sign-In-and-Sign-Up-button-on-the-right-side-of-the-header.-These-buttons-should-trigger-a-Modal-component.-The-Modal-should-include:-Sign-In-and-sign-up-Component:-Options-to-sign-in-using-social-media-accounts.-A-form-for-manual-sign-in-with-the-following-fields:-Name-(optional).-Email-(required).-Phone-Number:-Includes-a-dropdown-for-country-code-and-flag-selection.-Password-and-Re-enter-Password-(for-Sign-Up-only).-Login-button.-Forget-Password-link:-Opens-a-secure-recovery-process.-All-fields-should-have-proper-validation.-Users-cannot-proceed-until-they-enter-correct-information.-For-invalid-inputs,-display-error-messages.-Behavior:-When-the-user-successfully-logs-in-or-signs-up,-close-the-Modal-window-and-replace-the-Sign-In/Sign-Up-buttons-in-the-header-with-the-user's-profile-icon.-User-Profile-Button:-Clicking-on-the-profile-icon-opens-a-small,-responsive-pop-up-window-containing-the-following:-Name-(editable).-Email-(editable).-Phone-Number:-With-a-country-code-selector.-Change-Password:-A-secure-form-for-updating-the-password.-Delete-Account:-A-confirmation-prompt-before-account-deletion.-Theme-Toggle:-A-Dark-Mode-switch-to-dynamically-change-the-entire-UI-theme.-Ensure-the-design-is-compact,-user-friendly,-visually-appealing,-and-fully-responsive-across-different-screen-sizes.