JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/d3@4.13.0/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css">
<div>
<div id="target1" class="c"></div>
</div>

CSS

.c {
  border: solid 1px gray;
  width: 500px;
  height: 350px;
  margin: 0;
  padding: 0;
  float: left;
}

JavaScript

var chart = new Taucharts.Chart({
    type: 'bar',
    x: 'month',
    y: 'count',
    color: 'team',
    guide:{
        color:{
            // using color codes
            brewer:{
                NewTeam:'#ff0000',       // red
                Alaska:'rgb(0, 0, 255)', // blue
                oldTeam:'#000'           // black
            }
        }
    },
  	plugins: [
  		Taucharts.api.plugins.get('legend')()
  	],
    data: [
    		{team:'NewTeam', month:'Jan', count: 10},
        {team:'Alaska', month:'Jan', count: 8},
        {team:'oldTeam', month:'Jan', count: 18},

				{team:'NewTeam', month:'Feb', count: 5},
        {team:'Alaska', month:'Feb', count: 6},
        {team:'oldTeam', month:'Feb', count: 7}
		]
});

chart.renderTo('#target1');