JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<script src='https://cdn.plot.ly/plotly-2.14.0.min.js'></script>
</head>

<body>
  <div id='plotHere' style="width:600px;height:250px;"></div>
</body>

JavaScript

let classes = {"a": [[1,2,3], [0,0,0], [1,2,3]], "b": [[1,2,3], [1,1,1], [1,2,3]]}
    let trace_keys = Object.keys(classes);
    let all_traces = [];   
    
    // create one trace for every class and store them in all_traces
    for(let c=0; c < trace_keys.length; c++){

        let trace = {
            x: classes[trace_keys[c]][0],
            y: classes[trace_keys[c]][1],
            z: classes[trace_keys[c]][2],
            mode: 'markers',
            marker: {
                size: 8,
                line: {
                    color: 'rgba(217, 217, 217, 0.14)',
                    width: 0.5,
                    opacity: 1.0},
                opacity: 1.0},
            type: 'scatter3d',
            name: trace_keys[c],
            showlegend: true
		};
		all_traces.push(trace)
    }

		let layout = {
		    margin: {l: 5, r: 5, b: 5, t: 5}};

		Plotly.newPlot('plotHere', all_traces, layout);