JSFiddle - React, Tailwind, and code Playground

by Michael Barros

HTML

<div class="akkd-hidden-menu-container">
    <div class="akkd-menu-container" style="z-index: 1; left: 579.078px; top: 1120px">
        <akkd-menu class="akkd-menu akkd-menu-style-01 akkd-menu-style-02" tabindex="0">
            <akkd-menu-item class=".akkd-menu-item akkd-hide-focus-ring">
                <div class="akkd-menu-item-inner-01 akkd-menu-item-inner-02">
                    <a href="https://maps.google.com/maps?q=cmd+powershell+-Command+Select-Object+site:stackoverflow.com&amp;safe=active&amp;rlz=1C1GCEA_enUS874US874&amp;sxsrf=ALeKk03zkxhkYe_U4DgL1k-sgQYR4YeiNw:1605145184102&amp;biw=2560&amp;bih=1335&amp;um=1&amp;ie=UTF-8&amp;sa=X&amp;ved=2ahUKEwiKioz87_vsAhVOmlkKHUpEDmsQ_AUoAHoECAsQCg"
                        tabindex="-1"><span class="akkd-menu-item-text-01 akkd-menu-item-text-02"
                            style="height: 16px; width: 16px"><svg focusable="false" viewBox="0 0 16 16">
                                <path
                                    d="M7.503 0c3.09 0 5.502 2.487 5.502 5.427 0 2.337-1.13 3.694-2.26 5.05-.454.528-.906 1.13-1.358 1.734-.452.603-.754 1.508-.98 1.96-.226.452-.377.829-.904.829-.528 0-.678-.377-.905-.83-.226-.451-.527-1.356-.98-1.959-.452-.603-.904-1.206-1.356-1.734C3.132 9.121 2 7.764 2 5.427 2 2.487 4.412 0 7.503 0zm0 1.364c-2.283 0-4.14 1.822-4.14 4.063 0 1.843.86 2.873 1.946 4.177.468.547.942 1.178 1.4 1.79.34.452.596.99.794 1.444.198-.455.453-.992.793-1.445.459-.61.931-1.242 1.413-1.803 1.074-1.29 1.933-2.32 1.933-4.163 0-2.24-1.858-4.063-4.139-4.063zm0 2.734a1.33 1.33 0 11-.001 2.658 1.33 1.33 0 010-2.658">
                                </path>
                            </svg></span>Maps</a>
                </div>
            </akkd-menu-item>
            <akkd-menu-item class=".akkd-menu-item akkd-hide-focus-ring">
                <div class="akkd-menu-item-inner-01 akkd-menu-item-inner-02">
                    <a...

CSS

.akkd-menu-item-text-01 {
    margin-right: 5px;
    vertical-align: text-bottom;
}

.akkd-menu-item-text-02 {
    display: inline-block;
    fill: currentColor;
}

.akkd-menu-item-text-02 svg {
    display: block;
    height: 100%;
    width: 100%;
}

.akkd-hide-focus-ring {
    outline: 0;
}

.akkd-hide-focus-ring:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.akkd-hidden-menu-container {
    z-index: 1001;
    position: absolute;
    top: -1000px;
}

.akkd-menu {
    background-color: #fff;
}

.akkd-menu akkd-menu-item {
    display: block;
    font-size: 14px;
    line-height: 23px;
    white-space: nowrap;
}

.akkd-menu akkd-menu-item a {
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: pointer;
}

.akkd-menu akkd-menu-item a,
.akkd-menu akkd-menu-item a:visited,
.akkd-menu akkd-menu-item a:hover {
    text-decoration: inherit;
    color: inherit;
}

.akkd-menu-style-01 akkd-menu-item {
    color: #5f6368;
}

.akkd-menu-style-01 akkd-menu-item a {
    line-height: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.akkd-menu-container {
    display: block;
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
}

.akkd-menu-style-02 {
    border: none;
    display: block;
    outline: none;
}

.akkd-menu-style-02 {
    border-radius: 8px;
}

.akkd-menu-style-02 {
    padding: 5px 0;
}

.akkd-menu-item {
    display: block;
    position: relative;
}

.akkd-menu-item-inner-01 {
    overflow: hidden;
    padding: 0 16px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.akkd-menu-item-inner-01.akkd-menu-item-inner-02 {
    padding: 0;
}

.akkd-menu-item-inner-02 > * {
    padding: 0 16px;
}

.akkd-menu-item:hover {
    cursor: pointer;
}

.akkd-menu-item {
    cursor: default;
}

.akkd-menu-item-inner-01 {
    line-height: 23px;
}

.akkd-menu-item:active {
    background-color: rgba(0, 0, 0, 0.1);
}