Workspace Sharing Interface - Copy this React, Tailwind Component to your project
Create-a-responsive-user-interface-for-a-feature-called-"Workspace-Sharing"-in-an-application-named-"My-First-Workspace."-The-UI-should-include-the-following-components-and-adapt-seamlessly-to-various-screen-sizes:-Header-Section:-Title:-"My-First-Workspace-workspace-sharing."-Description:-A-brief-description-under-the-title:-"This-workspace-has-1-collector.-Adding-a-workspace-collaborator-will-give-them-access-to-all-bases-within-the-workspace."-Invitation-Section:-Two-tabs-labeled-"INVITE-BY-EMAIL"-and-"CREATE-LINK."-INVITE-BY-EMAIL-tab-should-be-active-by-default:-An-input-field-with-a-placeholder:-"invite-more-workspace-collectors-via-email."-A-blue-button-labeled-"Creator"-next-to-the-input-field.-Another-input-field-below-for-adding-an-optional-message-with-a-placeholder:-"Add-a-message-(optional)."-A-blue-"Invite"-button-next-to-the-message-input-field.-CREATE-LINK-tab:-Display-a-link-for-inviting-collaborators-with-a-copy-feature.-Show-the-link:-"https://purecode.com/inviteted=inuuv11"-with-a-label-"Creator-invite-link-for-any-email."-A-note-indicating-when-the-link-was-created-and-a-"Creator"-badge-next-to-it.-Collaborator-Section:-A-title:-"Workspace-collaborators."-A-search-input-field-with-a-placeholder:-"Find-a-workspace-collaborator-by-name-or-email."-A-list-of-current-collaborators:-Display-the-collaborator's-name,-email,-join-time,-and-role.-Example:-Name:-John-Doe-Email:-Arnold16@gmail.com-Joined:-20-hours-ago-Role:-Owner-Responsiveness-Requirements:-On-smaller-screens,-stack-elements-vertically-for-better-readability.-Ensure-input-fields-and-buttons-are-easily-tappable-on-touch-devices.-Adjust-font-sizes-and-spacing-to-maintain-usability-across-different-device-sizes.-The-design-should-be-clean-and-intuitive,-providing-users-with-a-straightforward-way-to-manage-workspace-collaborators.
