JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/nicoespeon/gitgraph.js/develop/src/gitgraph.js"></script>
<canvas id="gitGraph"></canvas>

CSS

.gitgraph-tooltip {
  position: absolute;
  margin-top: -15px;
  margin-left: 25px;
  padding: 10px;
  border-radius: 5px;
  background: #EEE;
  color: #333;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

.gitgraph-tooltip:after {
  position: absolute;
  top: 10px;
  left: -18px;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
  border-right-color: #EEE;
  content: "";
}

.gitgraph-detail {
  position: absolute;
  padding: 10px;
  text-align: justify;
  width: 600px;
  display: block;
}

JavaScript

var gitgraph = new GitGraph({
  template: "metro",
  orientation: "vertical",
  mode: "compact",
  author: "Test"
});
var master = gitgraph.branch("master");
gitgraph.commit(); // 1 commit upon HEAD
var develop = gitgraph.branch("develop"); // New branch from HEAD
var myfeature = develop.branch("myfeature"); // New branch from develop
develop.commit();
master.commit();
myfeature.commit();
develop.commit();
master.commit();
develop.merge(master);
myfeature.merge(master);