JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <li class="menu__item"><a href="#" class="menu__link">Пункт 1</a> </li>
  <li class="menu__item"><a href="#" class="menu__link">Пункт 2</a></li>
  <li class="menu__item"><a href="#" class="menu__link">Пункт 3</a></li>
  <li class="menu__item"><a href="#" class="menu__link">Пункт 4</a></li>
  <li class="menu__item"><a href="#" class="menu__link">Пункт 5</a></li>
   <li class="menu__item"><a href="#" class="menu__link">Пункт 5</a></li>
</ul>

SCSS

.menu {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  text-align: justify;
  text-justify: newspaper;
  font-size: 0;

	&__item{
		display: inline-block;
		text-align: center;
		position: relative;
    border:1px solid red;
    width: 100%;
 
		&_last{
			width: 100%;
			background: none;
		}
		&:after{
			content: '';
			position: absolute;
			top: 50%;
			left: calc(100% - 3px);
			width: 8px;
			height: 8px;
			background-color: #000;
			transform: translateY(-50%) rotate(45deg);
		}
		&:last-child{
			&:after{
				display: none;
			}
		}
	}

	&__link{
		display: inline-block;
		font-size: 15px;
		text-decoration: none;
		text-transform: uppercase;
	}

}