JSFiddle - React, Tailwind, and code Playground

HTML

<h1>ЭТО ТАНЧИК</h1>
<div class="flex top">
  <div class="main"></div>
  <div class="flex dulo">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>
</div>
<div class="bottom"></div>

CSS

.flex {
  display: flex;
  height: 100px;
  align-items: center;
}
.dulo {
  width: 250px;
    transform: translateX(70px);
}
.line {
  width: 25%;
  background: #000;
  height: 100%;
}
.line:nth-child(2) {
  height: 75%;
}
.line:nth-child(3) {
  height: 50%;
}
.line:nth-child(4) {
  height: 25%;
}
.main {
  min-width: 229px;
      transform: translateX(124px);
  height: 100%;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 100% 100%, 0 100%, 0% 50%);
  background: black;
}
.bottom {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: black;
  height: 140px;
  width: 450px;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction:column;
}