Character Builder - Copy this React, Tailwind Component to your project
haracter Builder Interface Instructions Overview The app is a character builder for Chop Chop Nobody's Adventure. It features dropdown menus for selecting character attributes and images displayed dynamically based on the selection. Users should also be able to rearrange image positions within the interface. Specifications General Layout: Menus on the Left: All dropdown menus are aligned on the left side. Images on the Right: Corresponding images are displayed next to the dropdowns. Image Placement: Genies: Display 3 images in a single horizontal row with small spaces between each (e.g., Genie 1, Genie 2, Genie 3). Dropdown menu on the left; images aligned horizontally on the right. Abilities: Display 4 images in a single horizontal row. Dropdown menu on the left; images on the right. Main and Assisting Beasts: Display 2 images side by side with small spaces between. Dropdown menu on the left; images on the right. Text-Only Categories: Bloodline Buff, Main Stats, Secondary Stats, and Resistance Mounts: Dropdown menu displays text options only. No images are displayed for these categories. Repositionable Images: Users should be able to drag and reposition images within the app. Image Dimensions: Images are small, approximately 100x100 pixels. Extra Info Text Area: A labeled "Extra Info" text box below all other elements for users to input additional notes. Detailed Dropdown Options Bloodline Buff: Text-based dropdown with options (e.g., specific Bloodline Buff names). Main Stats & Secondary Stats: Dropdown menus with the following options: Dodge Crit Combo Counter Attack Lifesteal Stun Resistance Mount: Text-based dropdown menu with options: Dodge Resistance Crit Resistance Combo Resistance Counter Attack Resistance Lifesteal Resistance Stun Resistance Additional Requirements Customization-Friendly: Allow easy addition and updating of images. Flexible Layout: Ensure the layout adapts to allow drag-and-drop repositioning of images. User-Friendly: Keep the interface clean and intuitive.
