JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<ol class="list">
	<li class="list-item">Пункт 1</li>
	<li class="list-item">Пункт 2</li>
	<li class="list-item">Пункт 3</li>
	<li class="list-item">Пункт 4</li>
	<li class="list-item">Пункт 5</li>
	<li class="list-item">Пункт 6</li>
</ol>
<ol class="list sample">
	<li class="list-item">Пункт 1</li>
	<li class="list-item">Пункт 2</li>
	<li class="list-item">Пункт 3</li>
	<li class="list-item">Пункт 4</li>
	<li class="list-item">Пункт 5</li>
	<li class="list-item">Пункт 6</li>
</ol>

CSS

.list{
	display:flex;
	flex-direction:column;
	list-style:none;
	font-size:1.5em;
	counter-reset:list;
}
.list-item:before{
	content:counter(list) ".";
	counter-increment:list;
	display:inline-block;
	width:35px;
	margin:0 5px 0 -40px;
	text-align:right;
}
.sample .list-item:nth-child(4){
	counter-increment:list 2;
	order:6;
}
.sample .list-item:nth-child(5){
	counter-increment:list -2;
	order:5;
}
.sample .list-item:nth-child(6){
	counter-increment:list -2;
}