JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Как сверстать такой левый блок </li>
  <li>(с линиями не особо получается).</li>
  <li>P.S.Потом буду делать </li>
  <li>по клику смена контента справа</li>
</ul>

CSS

body {
  padding: 20px;
}

ul {
counter-reset: list;
}

li {
  position: relative;
  padding: 0 0 40px 30px;
  border-left: 1px solid #ccc;
}

li:before {
  content: '';
  counter-increment: list;
  content: counter(list);
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  left: -15px;
  top: -5px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

li:last-child {
  border-left-color: transparent
}