JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="example1">
    <center>Correct</center>
    <h1 class="numbered">Heading 1</h1>
    <h2 class="numbered">Heading 1.1</h2>
    <h2 class="numbered">Heading 1.2</h2>
    <h1 class="numbered">Heading 2</h1>
    <h2 class="numbered">Heading 2.1</h2>
    <h2 class="numbered">Heading 2.2</h2>
  </div>
  <div class="example2">
    <center>Incorrect</center>
    <div><h1 class="numbered">Heading 1</h1></div>
    <div><h2 class="numbered">Heading 1.1</h2></div>
    <div><h2 class="numbered">Heading 1.2</h2></div>
    <div><h1 class="numbered">Heading 2</h1></div>
    <div><h2 class="numbered">Heading 2.1</h2></div>
    <div><h2 class="numbered">Heading 2.2</h2></div>
  </div>
  <div class="example3">
    <center>Incorrect</center>
    <div><h1 class="numbered">Heading 1</h1></div>
    <div><h2 class="numbered">Heading 1.1</h2></div>
    <div><h2 class="numbered">Heading 1.2</h2></div>
    <div><h1 class="numbered">Heading 2</h1></div>
    <div><h2 class="numbered">Heading 2.1</h2></div>
    <div><h2 class="numbered">Heading 2.2</h2></div>
  </div>
</div>

CSS

.example1 {
  counter-reset: a;
}
.example2 {
  counter-reset: a;
}
.example3 {
  counter-reset: a b c d e f;
}

h1.numbered {
  counter-increment: a;
  counter-reset: b;
}
h2.numbered {
  counter-increment: b;
  counter-reset: c;
}
h3.numbered {
  counter-increment: c;
  counter-reset: d;
}
h4.numbered {
  counter-increment: d;
  counter-reset: e;
}
h5.numbered {
  counter-increment: e;
  counter-reset: f;
}
h6.numbered {
  counter-increment: f;
}

h1.numbered::before {
  content: counter(a) " ";
}
h2.numbered::before {
  content: counter(a) "." counter(b) " ";
}
h3.numbered::before {
  content: counter(a) "." counter(b) "." counter(c) " ";
}
h4.numbered::before {
  content: counter(a) "." counter(b) "." counter(c) "." counter(d) " ";
}
h5.numbered::before {
  content: counter(a) "." counter(b) "." counter(c) "." counter(d) "." counter(e) " ";
}
h6.numbered::before {
  content: counter(a) "." counter(b) "." counter(c) "." counter(d) "." counter(e) "." counter(f) " ";
}

/* ignore the styling below */
.wrapper > div {
  float: left;
  padding: 0 20px;
  font-size: small;
}
.wrapper > div:not(:first-child) {
  border-left: 1px solid black;
}
center {
  font-size: larger;
  font-weight: bold;
  text-decoration: underline;
}
.numbered::before {
  color: red;
}