JSFiddle - React, Tailwind, and code Playground

by DemonTut

HTML

<div class="header">
  <p class="logo">Наша компания</p>
  <a href="#">клиенты</a>
  <a href="#" class="highlight">о нас</a>
  <a href="#">вакансии</a>
</div>

CSS

.header {
  display: flex;
  background-color: black;
}

.logo {
  color: white;
  font: 2rem "Fira Sans", sans-serif;
  margin: 10px auto 10px 15px;
}

.header a {
  background-color: #505050;
  align-self: flex-end;
  margin-right: 5px;
  padding: 5px 12px;
  text-decoration: none;
  color: white;
  border-radius: 4px 4px 0 0;
  font-weight: 700;
}

.header a:nth-last-child(1) {
  margin-right: 8px;
}

.header a.highlight {
  background-color: white;
  color: black;
}

JavaScript

/* 
const links = document.querySelectorAll('.header a')

links.forEach(l => l.addEventListener('click', () => l.classList.toggle('highlight')))
 */

/*  
 const link = document.querySelector('.header a.highlight')
 link.focus()
  */