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>
<code>git merge</code>

<canvas id="gitGraph1"></canvas>
<code>git merge --no-ff</code>

CSS

body {
  height: 500px;
}

code {
  background: #333;
  color: #eee;
  padding: .3em .5em;
  border-radius: .3em;
  margin: 2em;
}

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('Feature: user login')
  login.merge(dev)

  const register = g.branch({ name: 'register', parentBranch: dev, column: 2 })
  register.commit('Feature: user register')

  register.merge(dev)
}

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

  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')
    .commit('Feature: user login')
    .commit('Feature: user register')
}