JSFiddle - React, Tailwind, and code Playground

by jnbdz

HTML

<div class="content"></div>
<div class="arrow-right-box">
    <div class="arrow-right"></div>
    <div class="arrow-right-two"></div>
</div>

<div class="content second"></div>
<div class="arrow-left-box">
    <div class="arrow-left"></div>
    <div class="arrow-left-two"></div>
</div>

CSS

.content {
    position: absolute;
    border: 5px solid gray;
    width: 300px;
    height: 250px;
}

.second {
    margin: 0px 0 0 340px;
}

.arrow-right-box {
    position: absolute;
    margin: 10px 0 0 0;
}

.arrow-right {
    position: absolute;
	width: 0; 
	height: 0;
    margin: 5px 0 0 304px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 30px solid #fff;
}

.arrow-right-two {
	width: 0;
	height: 0;
    margin: 0 0 0 305px;
	border-top: 35px solid transparent;
	border-bottom: 35px solid transparent;
	border-left: 35px solid gray;
}

.arrow-left-box {
    position: absolute;
    margin: 180px 0 0 309px;
}

.arrow-left {
    position: absolute;
	width: 0;
	height: 0;
	border-top: 35px solid transparent;
	border-bottom: 35px solid transparent;
	border-right: 35px solid gray;
}

.arrow-left-two {
    position: absolute;
	width: 0;
	height: 0;
    margin: 5px 0 0 6px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-right: 30px solid #fff; 
}