JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<div class="items">
	<div class="item"></div>
	<div class="divider"><div class="divider-inner">&gt;</div></div>
	<div class="item"></div>
	<div class="divider"><div class="divider-inner">&gt;</div></div>
	<div class="item"></div>
	<div class="divider"><div class="divider-inner">&gt;</div></div>
	<div class="item"></div>
	<div class="divider"><div class="divider-inner">&gt;</div></div>
	<div class="item"></div>
</div>

CSS

.items {
  display: flex;
  height: 160px;
}

.item {
  width: 80px;
  border: 2px solid black;
  border-radius: 10px;
}

.divider {
  width: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider-inner {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 100%;
  flex-shrink: 0;
  text-align: center;
  background: #fff;
}

.divider-inner::before,
.divider-inner::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 6px;
  margin-left: -3px;
  height: 4px;
  background: #fff;
}

.divider-inner::before {
  top: -3px;
}

.divider-inner::after {
  bottom: -3px;
}