JSFiddle - React, Tailwind, and code Playground

HTML

<div class='item'>
  <div class='item-header'>
    Item 1 Header
  </div>
  <div class='item-content'>
    Lorem Ipsum Dolor Sit Amet....
  </div>
</div>
<div class='item'>
  <div class='item-header'>
    Item 2 Header
  </div>
  <div class='item-content'>
    Lorem Ipsum Dolor Sit Amet....
  </div>
</div>
<div class='item'>
  <div class='item-header'>
    Item 3 Header
  </div>
  <div class='item-content'>
    Lorem Ipsum Dolor Sit Amet....
  </div>
</div>

CSS

body {
  counter-reset: item-counter;
}
.item {
  counter-increment: item-counter;
}
.item-header:before {
  content: counter(item-counter) ". ";
}

/* just demo */

.item {
  border: 1px solid;
  height: 100px;
  margin-bottom: 10px;
}
.item-header {
  border-bottom: 1px solid;
  height: 40px;
  line-height: 40px;
  padding: 5px;
}
.item-content {
  padding: 8px;
}