Product Variant Selector - Copy this React, Tailwind Component to your project

I am requesting a component to implement a product variant selector for my wholesale platform. BUSINESS CONTEXT: I sell products that are marketed in different formats: individual, blister x24, blister x48 units, etc.. Each sales format represents a “variant” of the product. Wholesale customers should be able to easily select which format they want to buy. DATA STRUCTURE: The variants have this structure: { "sku": "CP11 halloween 48", // Unique identifier of the product + format "packSize": "Blister 48", // Name of the format (ex: "Individual", "Blister 24", "Blister 48") "is_master": false, // Indicates if it is the default selected variant "price": "2448.00" // Price in string format } FUNCTIONAL REQUIREMENTS: Display all available variants in a clear and intuitive interface Visually highlight the currently selected variant Allow switching between variants with one click Display the price corresponding to each variant When a variant is selected, update the displayed information (price) Automatically preselect the variant marked as "is_master: true" DESIGN PREFERENCES: Professional look oriented to wholesale customers (B2B) Clean layout that clearly shows the differences between variants Fully responsive (mobile, tablet and desktop) Good visual contrast to distinguish the selected option Consider implementing a "card" type selector with visual information about the format.