JSFiddle - React, Tailwind, and code Playground

HTML

<figure style="display:inline-block">
  <figcaption style="color:yellow;">writing-mode: vertical-lr;</figcaption>
  <p class="box v_lr" style="font-size: smaller;    writing-mode: vertical-lr;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt tempora inventore. Facere, omnis, dolore, provident quisquam nobis odio fugiat quaerat nulla vero perspiciatis voluptatum esse minus voluptas iusto veritatis.Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Necessitatibus, deleniti, debitis, laborum sit sapiente quaerat consequatur facere optio eum porro dolor ipsam velit a amet quam. Vel, ut nesciunt id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio,
    nisi, minus obcaecati at no </p>
</figure>

<figure style="display:inline-block">
  <figcaption style="color: yellow; text-align: right; line-height: 0.5em;">writing-mode: vertical-rl;
    <br> writing-mode: sideways-rl;</figcaption>
  <p class="box v_rl" style="font-size: smaller;    writing-mode: vertical-rl;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt tempora inventore. Facere, omnis, dolore, provident quisquam nobis odio fugiat quaerat nulla vero perspiciatis voluptatum esse minus voluptas iusto veritatis.Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Necessitatibus, deleniti, debitis, laborum sit sapiente quaerat consequatur facere optio eum porro dolor ipsam velit a amet quam. Vel, ut nesciunt id. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio,
    nisi, minus obcaecati at no </p>
</figure>

<figure style="display:inline-block; ">
  <figcaption style="color: yellow;"> writing-mode: sideways-lr;</figcaption>
  <p class="box s_lr" style="font-size: smaller;    writing-mode: sideways-lr;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est incidunt tempora inventore. Facere, omnis, dolore, provident quisquam nobis odio fugiat quaerat nulla vero perspiciatis voluptatum esse minus voluptas...

CSS

body {
	background-color: rgb(85, 85, 85);
}

* {
	color: #fff;
	hyphens: auto;
	padding: 1em;
	box-sizing: border-box;
	margin: 10px;
 }
 
.box{
	display: inline-block;
	width:300px; 
	border-width:0 1px; 
	border-style: solid; 
	border-color:yellow;
	height: 300px;
	overflow: auto;
	position: relative;
}
	 
writing-mode:vertical-rl 
/* writing-mode:sideways-rl */
.v_rl:before {
	content: "";
	position: absolute;
	border:10px solid transparent;
	border-top:10px solid tomato;
	top: -1px;
	right:11px; 
 	animation: strong 20s steps(12);
}
	@keyframes strong {
		from {right: 11px;}
		to {right: 200px;}
	}
.v_rl:after{
	content: "";
	position: absolute;
	border:10px solid transparent;
	border-left:10px solid tomato;
	top: 5px ;
	left:80px; 
 	animation: line 1700ms 12 ;
}
	@keyframes line  {
		from {top: 5px;}
		to {top: 280px;}
	}

/*writing-mode:vertical-lr;*/
	.v_lr:before {
	content: "";
	position: absolute;
	border:10px solid transparent;
	border-top:10px solid tomato;
	top: -1px;
	left:11px; 
 	animation: strong_lr 20s steps(12);
}
@keyframes strong_lr {
		from {left: 11px;}
		to {left: 200px;}
}
.v_lr:after{
	content: "";
	position: absolute;
	border:10px solid transparent;
	border-right:10px solid tomato;
	top: 5px ;
	right:80px; 
 	animation: line_lr 1700ms 12;
}
@keyframes line_lr  {
		from {top: 5px;}
		to {top: 280px;}
}
 
 /* writing-mode:sideways-lr */	
.s_lr:before {
	content: "";
	position: absolute;
	border:10px solid transparent;
	border-bottom:10px solid tomato;
	bottom: 1px;
	left:12px; 
 	animation: strong_s_lr 20s steps(12);
}
@keyframes strong_s_lr {
		from {left: 11px;}
		to {left: 200px;}
}
.s_lr:after{
	content: "";
	position: absolute;
	border:10px solid transparent;
	border-right:10px solid tomato;
	bottom: 5px ;
	right:80px; 
 	animation: line_s_lr 1700ms 12;
}
@keyframes line_s_lr  {
		from {bottom: 5px;}
		to {bottom: 280px;}
}