JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="wrapper" style="background: yellow;">
  <li class="element">
    <div class="element__content">
      <p>
      Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.
      Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.
      Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.
      Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.
      </p>
    </div>
  </li>
  <li class="element">
    <div class="element__content">
      <p>
      Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.
      Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.
      Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.
      
      </p>
    </div>
  </li>
  <li class="element">
    <div class="element__content">
      <p>
      Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod.
      </p>
    </div>
  </li>
</ul>

SCSS

$circle-inner: 24px;
$circle-outer: 30px;

.wrapper {
  &,
  & > .element {
    display: block;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
  }
  
  & > .element {
    position: relative;
    margin-bottom: 0;
    padding-left: 40px;
  
    &:before,
    &:after {
      position: absolute;
      content: '';
      display: block;
      border-radius: 100%;
    }
    
    &:before {
      width: $circle-inner;
      height: $circle-inner;
      background: #000;
      left: ($circle-outer - $circle-inner) / 2 + 1px;
      top: ($circle-outer - $circle-inner) / 2 + 1px;
    }
    
    &:after {
      /* left: ($circle-outer - $circle-inner) / 2; */
      left: 0;
      top: 0;
      width: $circle-outer;
      height: $circle-outer;
      border: 1px solid #f00;
    }
    
    .element__content {
      position: relative;
      padding-bottom: 10px;
      
      &:before {
        position: absolute;
        display: block;
        content: '';
        width: 1px;
        background: #f0f;
        top: $circle-outer + 1px;
        bottom: 0;
        left: -24px;
      }
    }
    
    &:last-child {
      .element__content:before {
        display: none;
      }
    }
    
    p {
      margin: 0;
    }
  }
}