JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="blocks">
  <div class="blocks__step">If</div>
   <div class="blocks__item">a user is updated</div>
   <div class="blocks__item">a user is updated</div>
   <div class="blocks__item">a user is updated</div>

</div>

<div class="blocks">
  <div class="blocks__step">And</div>
   <div class="blocks__item">a user is updated</div>
   <div class="blocks__item">a user is updated</div>

</div>
<div class="blocks">
  <div class="blocks__step">Then</div>
   <div class="blocks__item">Assign: 3 pieces of content</div>
   <div class="blocks__item">Share: 1 piece of content</div>

</div>

SCSS

.blocks {
  background:white;
 font-family: sans-serif;
  padding: 0 1rem;
  &__step {
    margin: 5px 0;
    background: blue;
    color:white;
    padding: 0.5rem;
    border-radius: 4px;
    position: relative;
    
    &:before {
      display:block;
      content: '';
      width: 0; 
      height: 0; 
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid blue;
      
      position: absolute;
      top: 100%;
      left: 1.3rem;
    }
  }
  
  &__item {
    
    margin: 11px 0 11px;
      border: 1px solid grey;
    padding: 0.5rem;
    border-radius: 5px;
     /* background: #444; */
    /* color:white; */
    margin-left:1rem;
    position: relative;
    
    &:before {
       display:block;
      content: '';
      width: 0; 
      height: 0; 
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #333;
      
      position: absolute;
      top: 100%;
      left: .3rem;
    }
    
      &:after {
       display:block;
      content: '';
      width: 0; 
      height: 0; 
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid white;
      
      margin-top: -1px;
      
      position: absolute;
      top: 100%;
      left: .3rem;
    }
    
    &:last-child:before,
    &:last-child:after {
      display:none;
    }
    /* 
    &:nth-child(2){
      &:before,
      &:after {
        left: 1.5rem;
      }
    }
     &:nth-child(3){
      &:before,
      &:after {
        left: 2rem;
      }
    }
     &:nth-child(4){
      &:before,
      &:after {
        left: 2.5rem;
      }
    } */
    
  }
}