JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<a href="tel:+78003331111" class="header__link hidden-sm hidden-xs">
<svg class="i i-phone">
<svg viewBox="0 0 20 20" width="15" height="15">
<path d="M7 16a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3-3H2V3c0-.551.449-1 1-1h6c.551 0 1 .449 1 1v10zm0 4c0 .551-.449 1-1 1H3c-.551 0-1-.449-1-1v-3h8v3zM3 0C1.346 0 0 1.346 0 3v14c0 1.654 1.346 3 3 3h6c1.654 0 3-1.346 3-3V3c0-1.654-1.346-3-3-3H3z"></path>
		</svg>
    <span>8-800-333-11-11</span>
</a>
<style>
.header__link span, .i, .link-dashed {
    vertical-align: middle;
}
.header__link {
    font-size: 1.125em;
    font-weight: 500;
    display: block;
    display: inline-block;
    margin-left: -.15em;
    color: #080707;
}
a {
    text-decoration: none;
    color: #60a710;
}
.header__link .i {
    fill: #a2c037;
}
svg:not(:root) {
    overflow: hidden;
}
.i {
    width: 1em;
    height: 1em;
    fill: inherit;
    stroke: inherit;
}
.i, .link-dashed, .link-logo {
    display: inline-block;
}
</style>