JSFiddle - React, Tailwind, and code Playground

by bmich72

HTML

<div class="row">
  <div class="col-md-6">
    <ol class="number-circles">
      <li>
        <div class="ol-block">
          <div class="blue-heading">Title 1</div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt
          eget dui ut, rutrum imperdiet sapien. </div>
      </li>
      <li>
        <div class="ol-block">
          <div class="blue-heading">Title 2</div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt
          eget dui ut, rutrum imperdiet sapien. </div>
      </li>
      <li>
        <div class="ol-block">
          <div class="blue-heading">Title 3</div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt
          eget dui ut, rutrum imperdiet sapien. </div>
      </li>

    </ol>
  </div>
  <div class="col-md-6">
    <ol class="number-circles four">

      <li>
        <div class="ol-block">
          <div class="blue-heading">Title 4</div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt
          eget dui ut, rutrum imperdiet sapien. </div>
      </li>
      <li>
        <div class="ol-block">
          <div class="blue-heading">Title 5</div>
          Lorem ipsum dolor sit amet,...

CSS

.col-md-6 {
  float: left;
  width: 50%;
}

.number-circles {
  margin: 40px 0 0 0;
  padding: 0;
  list-style-type: none;
}

.blue-heading {
  color: red;
  font-weight: 600;
  margin-bottom: 5px;
}

li {
  counter-increment: step-counter;
  margin-bottom: 40px;
}

.number-circles li::before {
  content: counter(step-counter);
  margin-right: 15px;
  font-size: 17px;
  background-color: red;
  border: solid 6px yellow;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  height: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 2px 8px;
  text-align: center;
  float: left;
}

.ol-block {
  float: left;
  display: inline-block;
  width: 85%;
  margin-bottom: 20px;
}

ol.four {counter-reset: step-counter 3}