JSFiddle - React, Tailwind, and code Playground

HTML

<div class="phone">
    <div class="city"><a href="#">Москва</a></div>
    <div class="number"><span>+7</span> (495) 123-45-67</div>
</div>

<ul class="phones-popup">
    <li>
        <div class="city">Москва</div>
        <div class="number"><span>+7</span> (495) 123-45-67</div>
    </li>
    <li>
        <div class="city">C-Петербург</div>
        <div class="number"><span>+7</span> (812) 456-654-5</div>
    </li>
    <li>
        <div class="city">Казань</div>
        <div class="number"><span>+7</span> (482) 987-65-23</div>
    </li>
</ul>

<script type="text/javascript">
    var d = document.getElementsByTagName('div')[0];
    var u = document.getElementsByTagName('ul')[0];
    
    d.onclick = function() {
        u.style.display = 'block';
        this.style.display = 'none';
    }
    
    u.onclick = function() {
        d.style.display = 'block';
        this.style.display = 'none';
    }
</script>

CSS

body {font: 13px/16px Arial, Helvetica, Verdana, sans-serif;}
ul, li {margin: 0; padding: 0;}

.phone {position: absolute; top: 10px; left: 50%; width: 290px; height: 32px; margin: 0 0 0 -145px;}
.phone .city {float: left; width: 80px; height: 32px; line-height: 35px; text-align: right;}
.phone .city a {text-decoration: none; color: #7f7f81; border-bottom: 1px dotted #6b6b6b; outline: none;}
.phone .city a:hover {color: #afafb4; border-color: #afafb4;}
.phone .number {overflow: hidden; height: 32px; padding: 0 0 0 8px; font: 20px/32px 'Trebuchet MS', Helvetica, sans-serif; line-height: 32px; color: #515153;}
.phone .number span {color: #939393;}

.phones-popup {display: none; position: absolute; top: 10px; left: 50%; width: 288px; margin: 0 0 0 -144px; list-style: none; border: #b2b2b2 1px dotted; border-top: 0;}
.phones-popup li {height: 30px; border-top: #b2b2b2 1px dotted; cursor: pointer;}
.phones-popup li:hover {background: #dbdbdb;}
.phones-popup .city {float: left; width: 78px; height: 30px; line-height: 33px; text-align: right; color: #7f7f81;}
.phones-popup .number {overflow: hidden; height: 30px; padding: 0 0 0 8px; font: 20px/30px 'Trebuchet MS', Helvetica, sans-serif; color: #515153;}
.phones-popup .number span {color: #939393;}