JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="blok-navik">
            <div>
        <h3>HTML и CSS</h3>
        <p>Использую этот язык</p>
        </div>
            <div>
        <h3>Непрерывность работы IT-инфраструктуры</h3>
        <p>Непрерывность работы и доступности IT-инфраструктуры: IP-видеонаблюдение, сетевое оборудование, антивирусный контроль</p>
        </div>
            <div>
        <h3>Модульный ремонт</h3>
        <p>Диагностика неисправностей компьютеров и локальной сети, прокладка ЛВС, обслуживание офисной АТС и ее инфраструктуры</p>
        </div>
        <div>
        <h3>Модернизация</h3>
        <p>Подготовка предложений по модернизации, приобретению сетевого и офисного оборудования. В ходе модернизаций мною переработана структура локальной сети</p>
        </div>
        <div>
        <h3>Педагогика</h3>
        <p>Преподавание компьютерной грамотности и ведение документации по курсам. Разработка учебных материалов. Составление ТКУ и конспекта урока</p>
        </div>
        <div>
        <h3>Психология и культурология</h3>
        <p>Изучаю психологию взаимодействия индивидуумов в социуме. Культурология позволяет выстроить более продуктивное взаимодействие с обучающимся</p>
        </div>
    </div>
 <div class="navbar">
 <a href="index.php"><img src="https://www.cyberforum.ru/images/logo2.png"></a>
 <a class="punkt" href="o_saite.php">O сайте</a>
 <a class="punkt" href="forma-svjazi.php">Контакты</a>
 <a class="punkt" href="new2.php">Статьи</a>
 <a class="punkt" href="index.php">Главная</a>
    <a class="menu-triger" href="#"></a>
        <div class="menu-popup">
            <a class="menu-close" href="#"></a>
            <ul class="mob">
                <li><a href="#news">Новости</a></li> 
                <li><a href="forma-svjazi.php">Контакты</a></li>
                <li><a href="o_saite.php">O сайте</a></li>     
                <li><a href="#">Прайс-лист</a></li>
                <li><a href="#">Услуги</a></li>
                <li><a...

CSS

.blok-navik { /* Блок навыков */
    padding: 0 8% 0 8%; /* Поля */
    text-align: center; 
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
      display: flex;
  flex-wrap: wrap;
  align-content: center;
  background: #fff1f1;
   }
.blok-navik div {
  width: 30%;
  height:200px;
    color: #000; /* Цвет текста */
    padding: 2px; /* Поля вокруг текста */
    transition: 0.5s linear; /* Время изменения */
    border-bottom: 4px solid #ff3333;
  margin: 15px;
  background: #fff;
  box-shadow: 0 0 7px #a0a0a0;
}
   .blok-navik div:hover {
    color: #fff; /* Цвет текста */
    background: #ff3333; /* Цвет фона */
   }
   .navbar img {
    float: left;
    display: block;
    text-align: center;
    padding: 1% 0 1% 10%;
    text-decoration: none;
}
 /* The navigation bar */
.navbar {
    overflow: visible;/* Отвечает за отображение мобильного меню в полный размер */
    background-color: rgba(6, 22, 52, 0.9);
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    font-family: 'Montserrat', sans-serif;
}
 
/* Links inside the navbar */
.punkt {
    float: right;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    top: 50%;
    left: 50%;
    transform: translate(-70%, 20%);
}
 
/* Change background on mouse-over */
.punkt:hover {
    color: #ff3333;
}
/* Main content */
.main {
    margin-top: 70px; /* Add a top margin to avoid content overlay */
}
@media (min-width: 767px) {
    .mob {
        display: none;
    }
}
 
@media (max-width: 767px) {
    .punkt {
        display: none;
    }
 
.menu-triger {
    background: url(../images/menu.png) 0 0 repeat;
    display: block;
    width: 25px;
    height: 17px;
    position: absolute;
    right: 15px;
    top: 40%;
}   
.menu-close {
    background: url(../images/close.png) 0 0 repeat;
    display: block;
    width: 28px;
   ...