JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
            <div class="container header__container">
                <div class="person">
                    <div class="person__pic">
                        <img src="img/person_img.png" alt="" class="person__img">
                    </div>
                    <div class="person__full-name">Константин Константинов</div>
                </div>
                <div href="#" class="phone">
                    <i class="fa fa-phone phone__icon" aria-hidden="true"></i>
                </div>
                <div href='#' class="contacts">Мои контакты
                    <div class="contacts__popup">
                        <a href='#' class="contacts__email">
                                                     kostya@mail.ru
                        </a>
                        <a href='#' class="contacts__phone">
                            +7 921 887 62 37</a>
                        <a href='#' class="contacts__messager">
                            kostik_</a>
                    </div>
                </div>

            </div>
        </header>

SCSS

$main-text-color: #646464;
$footer-bg-color: #414141;
$active-color: #33c1e3;
$button-color: #e85f61;
$contact-hover-color: #e85f61;
$main-bg-color: #f6f6f6;
$scroll-color: #d8d8d8;
$footer-text-color: #9c9c9c;
$bold-text-color: #414141;
$header-bg-color: #ffffff;
$footer-socials-color: #414141;
// //////////////////////////////
$brownish-grey: #646464;
$white-two: #f6f6f6;
$dark-sky-blue: #33c1e3;
$greyish-brown: #414141;
$white: #ffffff;

%clearfix {
    &:after {
        display: block;
        content: '';
        clear: both;
    }
}

@mixin laptop {
    @media (max-width: 1200px) {
        @content;
    }
}

@mixin tablet {
    @media (max-width: 992px) {
        @content;
    }
}

@mixin mobile {
    @media (max-width: 480px) {
        @content;
    }
}

.header {
    margin-bottom: 24px;
    background-color: $header-bg-color;
    &__container {
        display: flex;
        align-items: center;
        padding: 10px 130px 10px 130px;
        @include mobile {
            padding: 10px 0px 10px 0px;
        }
    }
}

.person {
    display: flex;
    align-items: center;
    &__pic {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
    }
    &__img {
        max-width: 100%;
        max-height: 100%;
    }
    &__full-name {
        color: $footer-bg-color;
        font-size: 18px;
        line-height: 28px;
        font-weight: 400;
    }
}

.contacts {
    position: relative;
    text-decoration: none;
    display: block;
    color: $active-color;
    font-family: "Fira_Sans";
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    margin-left: auto; // border-bottom: 1px dotted $active-color;
    background-image: linear-gradient(to right, $active-color 50%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 5px 1px;
    background-repeat: repeat-x;
    transition: all .3s;
    &:hover {
        color: $contact-hover-color;
       ...