JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<ul class="workflow-steps">
  <li><a  class="workflow-steps-done" href="#">Created</a></li>
  <li><a  class="workflow-steps-done" href="#">Started</a></li>
  <li><a  class="workflow-steps-done" href="#">Ad hoc Window</a></li>
  <li><a  class="workflow-steps-done" href="#">Partially Locked</a></li>
  <li><a  class="workflow-steps-done" href="#">Fx Order Prep</a></li>
  <li><a  class="workflow-steps-done" href="#">Fx Approval</a></li>
  <li><a class="workflow-steps-done" href="#">Fx Execution</a></li>
  <li><a class="workflow-steps-done" href="#">Under Adjustment</a></li>
  <li><a class="workflow-steps-done" href="#">Adjustments Approval</a></li>
  <li><a class="workflow-steps-skiped" href="#">Fx Order Prep (2)</a></li>
  <li><a class="workflow-steps-skiped" href="#">Fx Approval (2)</a></li>
  <li><a class="workflow-steps-skiped" href="#">Fx Execution (2)</a></li>
  <li><a class="workflow-steps-current" href="#">Locked</a></li>
  <li><a title ="Cycle is closed" href="#">Closed</a></li>
  <li><a href="#">Closed &amp; Matched</a></li>
  
  <li class="workflow-actions">
    <input type="button" value="Approve" />
    <input type="button" value="Reject" />
  </li>
</ul>


<p>Description</p>
<ol>
<li>Green: Done</li>
<li>Orange: Current state</li>
<li>Striked-Through: Skiped states, due to process flow</li>
<li>Grey: Next steps</li>
</ol>

CSS

.workflow-steps {
  list-style: none;
  overflow: hidden;
  font: 12px Helvetica, Arial, Sans-Serif;
  margin: 5px;
  /* padding right prevents the last arrow on the line to disapear when there's not enough space */
  padding: 0 20px 0 0;
}

.workflow-steps li {
  float: left;
  margin: 2px 0 2px 0;
}

.workflow-steps li a {
  color: #000;
  text-decoration: none;
  padding: 0px 0 0px 30px;
  line-height: 40px;
  background: #dcdcdc;
  position: relative;
  display: block;
  float: left;
  text-decoration: none;
  cursor: help !important;
  text-decoration: none;
}
.workflow-steps li a:hover {
  text-decoration: none;
}

.workflow-steps li a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 20px solid transparent;
  border-left: 20px solid #dcdcdc;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  left: 100%;
  z-index: 2;
}

.workflow-steps li a:before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  /* Go big on the size, and let overflow hide */
  border-bottom: 20px solid transparent;
  border-left: 20px solid white;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}

.workflow-steps li:first-child a {
  padding-left: 10px;
}

.workflow-steps li a.workflow-steps-done {
  background: #07d048;
}
.workflow-steps li a.workflow-steps-done:after {
  border-left-color: #07d048 !important;
}

.workflow-steps li a.workflow-steps-current {
  background: orange;
}
.workflow-steps li a.workflow-steps-current:after {
  border-left-color: orange !important;
}

.workflow-steps li a.workflow-steps-skiped {
  color: #aaa;
  text-decoration: line-through;
}
.workflow-steps li a.workflow-steps-skiped:after { }

/* What to do on mouse hover. Currently it only underlines the text */
.workflow-steps li a:hover {
  text-decoration:...