JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Быстрее</a></li>
        <li><a href="#">Выше</a></li>
        <li><a href="#">Сильнее</a></li>
        
      </ul>
    </nav>
  </header>
</body>

CSS

body {
  padding: 0;
  margin: 0;
  background-image: url('https://picsum.photos/id/173/1500/800');
  background-size: cover;
}

header {
  background-image: url('https://svgsilh.com/png-1024/1312434.png');
  background-repeat: no-repeat;
  background-position: center top 20px;
  background-size: 400px;
  padding-top: 102px;
}

nav {
  clip-path: polygon(0 100%, 0 80px, 190px 75px, 292px 35px, 292px 11px, 390px 0px, 476px 11px, 476px 35px, 578px 75px, 100% 80px, 100% 100%, 0 100%)
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

a {
  display: inline-block;
  font-family: serif;
  font-size: 40px;
  text-decoration: none;
  color: white;
  padding: 78px 5px 0px 5px;
  transition: background-color 0.3s linear;
}

a:hover {
  background-color: tomato;
}