Dual Column App - Copy this React, Tailwind Component to your project
Create-a-minimalistic,-dual-column-web-application-with-the-following-functionality-and-design-specifications:-Design:-Theme:-Simple-and-minimalistic-design-with-black-and-white-as-the-primary-color-scheme.-Left-column-and-right-column-are-evenly-split-for-balanced-visual-appeal.-Use-subtle-borders-or-dividers-to-differentiate-sections-without-clutter.-Left-Column:-Display-a-document-divided-into-individual-paragraphs.-Each-paragraph-is-separated-and-displayed-as-a-distinct-draggable-block.-Implement-drag-and-drop-functionality-to-allow-users-to-reorder-paragraphs-dynamically.-When-a-paragraph-is-selected,-highlight-it-visually-(e.g.,-a-light-gray-background-or-border).-Right-Column:-Display-tools-and-options-for-interacting-with-the-selected-paragraph-or-the-entire-document.-For-Selected-Paragraph:-Provide-options-to-edit,-rewrite,-or-apply-transformations-to-the-paragraph.-For-Entire-Document:-Include-options-to-edit-the-full-text,-perform-global-actions-like-summarization,-or-other-document-level-tools.-Functionality:-Paragraph-Actions:-Clicking-on-a-paragraph-selects-it,-and-the-corresponding-editing-options-appear-in-the-right-column.-Allow-inline-editing-of-the-selected-paragraph-if-desired.-Drag-and-Drop:-Users-can-drag-paragraphs-to-change-their-order-within-the-document.-Ensure-the-UI-dynamically-updates-to-reflect-the-new-order.-Right-Column-Tools:-Paragraph-Level-Actions:-Edit:-Open-a-text-area-or-modal-to-modify-the-paragraph.-Rewrite:-Automatically-suggest-a-rewritten-version-(placeholder-for-integration-with-an-AI-tool).-Other-customizable-options-as-required.-Document-Level-Actions:-Global-edit:-Open-the-entire-document-in-an-editable-text-area.-Summarize:-Provide-a-summary-(placeholder-for-integration-with-an-AI-tool).-Other-operations-on-the-full-document-as-needed.-Responsiveness:-Ensure-the-app-is-responsive,-adapting-cleanly-to-various-screen-sizes-while-maintaining-usability.
