JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="tlContainer">
  <div class="tlCenterLine tlCenter"></div>
<div class="tlItem">
<div class="tlTitle tlCenter">Mission</div>
<div class="tlOrb tlCenter"></div>

</div>
</div>

CSS

body {
  background: #454d51;
}

.tlCenterLine {
  width: 2px;
  height: calc(100% - 15px);
  position: absolute;
  background: white;
}
.tlCenter {
    right: 66%;
  transform: translateX(50%);
}
.tlOrb {
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 12px;
  position: absolute;
}
.tlTitle {
  position: absolute;
  margin-left: 500px;
}

JavaScript

// 173f5f
// 20639b
// 3caea3
// f6d55c
// ed553b