JSFiddle - React, Tailwind, and code Playground

by dodozhang21

HTML

<p class="box box-with-left-arrow">
Nam sodales turpis eget elit fringilla luctus. Mauris tortor velit, vestibulum a porta non, accumsan id ligula. Fusce rhoncus porttitor arcu, eu gravida ante accumsan eu. Donec rutrum, nunc vel elementum gravida, dolor sapien vestibulum nisi, nec vehicula neque urna eget sem. Ut ipsum magna, accumsan non ornare eget, pulvinar eget lectus. Nunc quam turpis, placerat nec malesuada ut, semper molestie diam.
</p>

<p class="box box-with-right-arrow">
Nam sodales turpis eget elit fringilla luctus. Mauris tortor velit, vestibulum a porta non, accumsan id ligula. Fusce rhoncus porttitor arcu, eu gravida ante accumsan eu. Donec rutrum, nunc vel elementum gravida, dolor sapien vestibulum nisi, nec vehicula neque urna eget sem. Ut ipsum magna, accumsan non ornare eget, pulvinar eget lectus. Nunc quam turpis, placerat nec malesuada ut, semper molestie diam.
</p>

<p class="box box-with-top-arrow">
Nam sodales turpis eget elit fringilla luctus. Mauris tortor velit, vestibulum a porta non, accumsan id ligula. Fusce rhoncus porttitor arcu, eu gravida ante accumsan eu. Donec rutrum, nunc vel elementum gravida, dolor sapien vestibulum nisi, nec vehicula neque urna eget sem. Ut ipsum magna, accumsan non ornare eget, pulvinar eget lectus. Nunc quam turpis, placerat nec malesuada ut, semper molestie diam.
</p>

<p class="box box-with-bottom-arrow">
Nam sodales turpis eget elit fringilla luctus. Mauris tortor velit, vestibulum a porta non, accumsan id ligula. Fusce rhoncus porttitor arcu, eu gravida ante accumsan eu. Donec rutrum, nunc vel elementum gravida, dolor sapien vestibulum nisi, nec vehicula neque urna eget sem. Ut ipsum magna, accumsan non ornare eget, pulvinar eget lectus. Nunc quam turpis, placerat nec malesuada ut, semper molestie diam.
</p>

CSS

.box {
    color: yellow;
    background: #000;
    margin: 30px;
    position: relative;
    padding: 1em;
}
.box-with-left-arrow:before {
    content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	border: 20px solid transparent;
	border-right-color: #000;
	left: -40px;
	top: 0;
}

.box-with-right-arrow:before {
    content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	border: 20px solid transparent;
	border-left-color: #000;
	right: -40px;
	top: 0;
}

.box-with-top-arrow:before {
    content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	border: 20px solid transparent;
	border-bottom-color: #000;
	left: 40%;
	top: -40px;
}

.box-with-bottom-arrow:before {
    content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	border: 20px solid transparent;
	border-top-color: #000;
	right: 40%;
	bottom: -40px;
}