JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="w1">
    <a class="btn" href="#">Test</a>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="w2">123</div>
</div>

CSS

.wrapper {
  width: 50%;
  border:1px solid #ccc;
  padding:50px 0px;
  margin:auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.w1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  margin-left:30px;
}
.w2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:30px;
  margin-right:30px;
  background-color:#ffcc00;
  padding:10px;
}
.btn {
    color: #000;
    border: 1px solid #000;
    border-right: none;
    padding: 0.5rem 1rem;
    width:80%;
}
span {
  width: 1rem;
  height: 1rem;
  border: 0.25rem solid;
  border-color: black transparent transparent black;
  transform: rotate(135deg);
  margin-left:-12px;
}