JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="connectedList connectedList--large">
  <div class="connectedList__item">Home</div>
  <div class="connectedList__item">Tests</div>
  <div class="connectedList__item">Files</div>
</div>

SCSS

body {
  background: white;
}
$listpadding: 1rem;
$listitempadding: 10px 20px 10px 20px;
.connectedList {
      /* border: 1px solid red; */
      padding: $listpadding;
      
  &__item {
    
    /* border: 1px solid lightgrey; */
    display:block;
    padding: $listitempadding;
    position: relative;
    color: rgba(0,0,0,0.5);
    transition: all 0.3s linear;
    
    &:before {
      content: '';
      display: block;
      background: lightgrey;
      width: 2px;
      height: 100%;
      
      position: absolute;
      top: 0;
      left: 0;
    }
    
    &:first-child {
      &:before {
        height: 50%;
        top: 50%;
      }
    }
    &:last-child {
      &:before {
        height: 50%;
      }
    }
    
    &:after {
       content: '';
      display: block;
      background: lightgrey;
      width: 8px;
      height: 8px;
      border-radius: 8px;
      
      position: absolute;
      top: 50%;
      left: -3px;
      transform: translateY(-50%);
      
      transition: all 0.3s linear;
    }
    
    &:hover {
      
      cursor: pointer;
      color: rgba(0,0,0,1);
      
      &:after {
        background: red;
      }
    }
  }
  
  &--large {
    .connectedList__item {
      font-size: 2rem;
    
      &:before {
        width: 5px;
      }
      &:after {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        left: -7px;
      }
      padding: 1rem 1.75rem;
    }
  }
}