C S G O Trade- up Interface - Copy this Html, Tailwind Component to your project

1. Trade Slot Grid Design: A 10-slot grid where players can drag and drop items. Visual Cue: Use borders or empty slots to indicate available space. Interaction: Players should be able to click on an item in their inventory to add it to the grid. Feedback: Highlight the slots with visual effects when hovering over them to show they are interactive. 2. Item Cards Design: Compact, detailed cards displaying item information. Details: Show item name, rarity (color-coded), collection, and possibly a small thumbnail. Rarity Indicator: Use a color border or background to indicate the rarity tier (blue for Mil-Spec, purple for Restricted, etc.). Selection Animation: Animate selected items when they’re moved to the trade-up slots (e.g., slide or zoom effects). 3. Trade-Up Button Prominent Button: A clearly visible “Trade-Up” button that is only activated when all 10 slots are filled. Inactive State: Gray it out or reduce opacity when the grid isn’t full. Hover/Active Effect: When active, it can change color or glow to attract attention. 4. Outcome Display Animation Sequence: After confirming the trade-up, a suspenseful animation should play, simulating the random selection. Example: A roulette-like spinner, a flash effect, or card reveal animation. Item Reveal: Show the final item with an attention-grabbing effect (e.g., item zooms in or a burst of color). Visual/Audio Feedback: Use sound effects like the familiar CS trade-up roulette sound or a unique confirmation sound to enhance immersion. 5. Rarity Tier Indicators Rarity Colors: Use the familiar rarity color scheme: Blue: Mil-Spec Purple: Restricted Pink: Classified Red: Covert Rarity Labels: Add clear rarity labels below item names to enhance readability and usability. 6. Error Messaging Invalid Input Warning: If players attempt to add invalid items (wrong rarity or incompatible collection), display a small error pop-up or tooltip explaining the issue. 7. Confirmation Modal Modal Design: Before the trade-up happens, display a confirmation modal summarizing the input items. Summary: List the items, with their rarity and collection, and remind the player of the randomness of the outcome. Cancel Option: Allow the player to cancel the trade-up and return to the item selection screen. 8. Themed Background and Effects Thematic Look: Apply a sleek, CS aesthetic with dark tones, metallic accents, and light particle effects to give the UI a polished, professional look. Lighting and Glow Effects: Use subtle glowing effects around the trade-up slots and buttons for a high-tech, premium feel.