JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 600px; width: 600px;">
  <sayduck-viewer product="6d4315a0-cdcc-0139-af34-7a7ba4e508ed" 
  mode="configurator"
  quality-preset="quality"
  hide-picker
>
  </sayduck-viewer>
  
        <button id="btn1">
          SEAT - WHITE
        </button>
        <button id="btn2">
          SEAT - RED
        </button>
        <button id="btn3">
          LEGS - OAK
        </button>
        <button id="btn4">
          LEGS - WALNUT
        </button>
    </div>

   <script>
        let api;
        window.addEventListener('sayduck.api-ready', (event) => {
            api = event.detail.instance
            addToButton();
        });
		
       	function addToButton(){
            document.querySelector("#btn1").onclick = () => {
            	//SEAT - WHITE
       				api.configurator.setActiveByUuid("0aa3c2a0-34ae-013a-899a-369ef6649311");
            }
            document.querySelector("#btn2").onclick = () => {
            	//SEAT - RED
       				api.configurator.setActiveByUuid("16c349e0-cdce-0139-f4af-7a7ba4e508ed");
            }
            document.querySelector("#btn3").onclick = () => {
            	//LEGS - OAK
       				api.configurator.setActiveByUuid("e4ab2b30-34ad-013a-be13-369ef6649311");
            }
            document.querySelector("#btn4").onclick = () => {
            	//LEGS - WALNUT
       				api.configurator.setActiveByUuid("106f7510-34ae-013a-7862-369ef6649311");
            }
        }
		
 </script>
<script src="https://viewer.sayduck.com" type="module" async></script>