JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.js"></script>
<canvas id="gitGraph"></canvas>

CSS

body {
  width: 100%;
  height: 400px;
}

JavaScript

const template = new GitGraph.Template({
  colors: ['#069fc2', '#8fc93a', '#f0c808', '#f46036', '#e34543'],
  commit: {
    shouldDisplayTooltipsInCompactMode: false,
  	dot: { size: 5, strokeWidth: 2.5 },
    message: {
      color: '#333',
      font: 'normal 10pt monospace',
      displayAuthor: false,
      displayBranch: true,
      displayHash: false
    }
  }
})

const g = new GitGraph({ template, mode: '' })

const master = g.branch({ name: 'master' })
master.commit('Init')

const dev = g.branch({ name: 'dev', parentBranch: master })
dev.commit('Install react-router')
	.commit('Add layout for Dashboard')
  .commit('Add Modal component')
  .commit('Add wrapper for HTTP requests')
  .commit('Add layout for homepage')
  
const login = g.branch({ name: 'login', parentBranch: dev })
login.commit('Install dependencies')
  .commit('Add layout for form login')
  .commit('Install validation library')
  .commit('Fix typo')
  .commit('Implement login logic')
  .commit('Fix undefined variable')