JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <ul class="list">
    <li class="list__item">
      <span class="list__inner">
        <span class="list__year">1934</span>
        <span class="list__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, error.</span>
      </span>
    </li>
    <li class="list__item">
      <span class="list__inner">
        <span class="list__year">1935</span>
        <span class="list__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, error.</span>
      </span>
    </li>
    <li class="list__item">
      <span class="list__inner">
        <span class="list__year">1936</span>
        <span class="list__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, error.</span>
      </span>
    </li>
    <li class="list__item">
      <span class="list__inner">
        <span class="list__year">1937</span>
        <span class="list__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, error.</span>
      </span>
    </li>
  </ul>
</div>

SCSS

body{
  background-color: #2A6994;
}
.container{
  position: relative;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 10px;
  &:before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 5px;
    background-color: #fff;
  }
}

.list{
  padding: 20px 0;
  &__item{
    &:nth-of-type(odd){
      margin-left: calc(50% + 30px);
      text-align: right;
      .list__inner{
        text-align: left;
        &:before{
          left: -15px;
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-right: 15px solid #FF5B6B;
          border-bottom: 10px solid transparent;
        }
        &:after{
          left: -40px;
        }
      }
    }
    &:nth-of-type(even){
      .list__inner{
        margin-right: calc(50% + 30px);
        &:before{
          right: -15px;
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-left: 15px solid #FF5B6B;
          border-bottom: 10px solid transparent;
        }
        &:after{
          right: -40px;
        }
      }
    }
  }
  &__inner{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #FF5B6B;
    display: inline-block;
    font-size: 18px;
    color: #fff;
    padding: 10px;
    position: relative;
    &:before{
      content: '';
      position: absolute;
      bottom: 10px;
    }
    &:after{
      content: '';
      position: absolute;
      bottom: 12px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #FF5B6B;
    }
  }
  &__year{
    display: block;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 5px;
  }
}