Matching Exercise - Copy this React, Tailwind Component to your project

Matching Exercise with Arrow Connections The interface for the matching exercise consists of two columns, one on the left for questions and one on the right for answers. Users can match items by either: Clicking on an item in the left column (questions) and then clicking on an item in the right column (answers). An arrow will visually connect the selected pair once matched. The system also highlights the selection to help users track their choices and provides visual feedback such as hover colors and persisted highlights for matched pairs. Detailed UI Features Two Columns Layout: The left column displays questions (e.g., "Capital of France"). The right column displays answers (e.g., "Paris"). Both columns are vertically aligned, with a consistent visual hierarchy. Clickable Items: Each item is clickable. On hover, the item changes its background color to indicate it is interactive. When selected, the item remains highlighted until the user makes a pair or cancels the selection. Arrow Visualization for Connections: When a user selects an item in the left column and then clicks an item in the right column, a line (arrow) connects the two items. The arrow indicates the user's match and persists on the interface. Hover Effects for Selection: Items in both columns display a distinct hover effect (e.g., a soft color highlight or border). Once clicked, the item remains highlighted to indicate it is selected until the user completes the match. Persisting Matched Pairs: Once a pair is matched, the corresponding items in both columns: Are visually linked by an arrow. Are highlighted with a unique color to indicate they are paired. Cannot be re selected unless the user clears or resets the match. Feedback Mechanism: If the user attempts to match an incorrect pair: The interface shows a brief error message (e.g., "Incorrect match! Try again."). The selected items are reset, and the user can try again. For a correct match: The system shows a success message (e.g., "Correct match!"). The pair is locked, and the user moves on to the next match. Reset or Undo Option: Users can undo a specific match by clicking on either of the paired items. A "Reset All" button allows users to clear all connections and start over. Responsive Design: The layout adjusts for various screen sizes: On smaller screens, columns stack vertically with arrows dynamically adjusted. On larger screens, columns are side by side. Interaction Flow Example User hovers over the left column and clicks on "Capital of France." The item is highlighted (e.g., blue background). User moves to the right column and clicks on "Paris." An arrow connects "Capital of France" and "Paris." Both items are highlighted green to indicate a correct match. User hovers over "Capital of Japan," but accidentally clicks "Rome." An error message appears: "Incorrect match! Try again." The selection resets, allowing the user to retry. User clicks "Tokyo," and it matches correctly with "Capital of Japan." Technical Considerations Hover and Active States: Use CSS transitions for hover and active states (e.g., :hover, :active). Arrow Drawing: Use SVG lines or a library like react archer for drawing arrows dynamically between matched items. State Management: Use useState to track selected items and matched pairs. Ensure hover colors persist for matched pairs but reset for unmatched ones. Accessibility: Ensure keyboard navigation (e.g., Tab, Enter) is supported for selection and pairing. Feedback: Use libraries like react toastify for visual feedback on correct/incorrect matches.