JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>03 Вложенные списки</title>
</head>
<body>
<div class="ul">
	<div class="point">&nbsp;</div>
	<div class="sub">
		<span>&nbsp;</span>
		<span>&nbsp;</span>
	</div>
	<div class="point">&nbsp;</div>
	<div class="sub">
		<span>&nbsp;</span>
		<span>&nbsp;</span>
	</div>
</div>

CSS

body{
	font:16px 'Times New Roman', serif;
	color:#000;
	background:#fff;
}
/*Внешний список*/
.ul{
	margin:1em 0 0 40px;
	counter-reset:d1;
}
.point{
	display:list-item;
	list-style:disc;
}
.ul .point:before{
	content:"Пункт";
}
.ul .point:after{
	content:counter(d1);
	counter-increment:d1;
}

/*Внутренний список*/
.sub{
	counter-reset:t1;
}
.sub span{
	display:list-item;
	margin:0 0 0 40px;
	list-style:circle;
}
.sub span:before{
	content:"Подпункт";
}
.sub span:after{
	content:counter(d1) '.' counter(t1);
	counter-increment:t1;
}