JSFiddle - React, Tailwind, and code Playground

by seatsio

HTML

<div style="height: 400px">
  <div id="chart" style="height: 100%"></div>
</div>
<script src="https://cdn.seatsio.net/chart.js"></script>
<script>
    new seatsio.SeatingChart({
        divId: 'chart',
        publicKey: '53b1ee0f-6611-4826-95a9-197be43a55e7',
        event: 'e1', 
        onObjectSelected: (o) => console.log(o.category.key),
        pricing: [{'category': 1, 'ticketTypes': [
               {'ticketType': 'adult', 'price': 30},
               {'ticketType': 'adult', 'price': 30},
               {'ticketType': 'adult', 'price': 30},
               {'ticketType': 'adult', 'price': 30},
               {'ticketType': 'adult', 'price': 30},
               {'ticketType': 'adult', 'price': 30},
               {'ticketType': 'adult', 'price': 30},                                    
               {'ticketType': 'child', 'price': 20}
            ]}],
    }).render();
</script>