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: 600px;
}

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, column: 2 })
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')
  .commit('Feature: user login')
  .commit('Feature: user register')
  
const staging = g.branch({ name: 'staging', parentBranch: dev, column: 1 })
dev.merge(staging)

dev.commit('Feature: A')
  .commit('Feature: B')
  .commit('Feature: C')
  .commit('Feature: D')

dev.merge(staging)

dev.commit('Feature: X')
  .commit('Feature: Y')
  .commit('Feature: Z')

dev.merge(staging)

staging.merge(master)