JSFiddle - React, Tailwind, and code Playground

by Clare12345

HTML

<div class="arrow_box_box">
    
<div class="arrow_box arrow_box1">
<h1 class="diagram_text">Discovery & Research</h1>
</div>
<div class="arrow_box arrow_box2">
<h1 class="diagram_text">Content Creation</h1>
</div>
<div class="arrow_box arrow_box3">
<h1 class="diagram_text">Design & Development</h1>
</div>

    
    
</div>
<div class="arrow_box_bottom">
<h1 class="diagram_text">Testing, Launch and Revisions</h1>
</div>

CSS

.arrow_box_box {
    display: flex; 
    width: 900px; 
}
.arrow_box {
	position: relative;
    width: 300px; 
    height: 300px; 
    flex: 1; 
}
.arrow_box1 {
    background: #55d5c8;
}
.arrow_box2 {
	background: #55d577;
}
.arrow_box3 {
	background: #d5d151;
}
.arrow_box_bottom {
	background: #d553c8;
    width: 900px; 
    position: relative; 
    margin-top: -20px; 
}
.arrow_box:after {
    left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-width: 25px;
	margin-top: -25px;
}
.arrow_box1:after {
	border-color: rgba(85, 213, 200, 0);
	border-left-color: #55d5c8;
    z-index: 10; 
}
.arrow_box2:after {
    border-color: rgba(85, 213, 119, 0);
	border-left-color: #55d577;
        z-index: 10; 
}
.arrow_box3:after {
	top: 107%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(213, 209, 81, 0);
	border-top-color: #d5d151;
	border-width: 25px;
	margin-left: -25px;
    z-index: 1000;
}
.arrow_box_bottom:after {
	bottom: 100%;
	left: 18%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(213, 83, 200, 0);
	border-bottom-color: #d553c8;
	border-width: 25px;
	margin-left: -25px;
    z-index: 100;
}
.diagram_text {
    color: #ddf8c6;
    text-align: center;
    font-size: 24px;
    line-height: 54px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

JavaScript

// Tooltip. No JS