Как сделать такую плажку?

[kalindovsky]

 

[Kolpak]

Совсем сырая, ее надо доделывать

<div class="linkHub">
    <div class="linkHub-body">
        <div class="linkHub-grid">
            <a class="linkHub-item" href="# " target="_blank" rel="noopener">
                <span class="linkHub-ico"><xf:fa icon="fa-paper-plane" /></span>
                <span class="linkHub-text">Мы в Telegram</span>
             </a>
            <a class="linkHub-item" href="#" target="_blank" rel="noopener">
                <span class="linkHub-ico"><xf:fa icon="fab fa-discord" /></span>
                <span class="linkHub-text">Официальный сервер Discord</span>
             </a>
            <a class="linkHub-item" href="#" target="_blank" rel="noopener">
                <span class="linkHub-ico"><xf:fa icon="fab fa-vk" /></span>
                <span class="linkHub-text">Группа VK</span>
             </a>
            <a class="linkHub-item" href="#" target="_blank" rel="noopener">
                <span class="linkHub-ico"><xf:fa icon="fab fa-youtube" /></span>
                <span class="linkHub-text">YouTube — Arizona Games</span>
             </a>
            <a class="linkHub-item" href="#" target="_blank" rel="noopener">
                <span class="linkHub-ico"><xf:fa icon="fa-comments" /></span>
                <span class="linkHub-text">Беседа в Telegram</span>
             </a>
            <a class="linkHub-item" href="#" target="_blank" rel="noopener">
                <span class="linkHub-ico"><xf:fa icon="fa-wrench" /></span>
                <span class="linkHub-text">Модификации</span>
             </a>
            <a class="linkHub-item" href="#" target="_blank" rel="noopener">
                <span class="linkHub-ico"><xf:fa icon="fa-exclamation-triangle" /></span>
                <span class="linkHub-text">Жалобы</span>
             </a>
            <a class="linkHub-item" href="#" target="_blank" rel="noopener">
                <span class="linkHub-ico"><xf:fa icon="fa-tools" /></span>
                <span class="linkHub-text">Тех.раздел</span>
             </a>
            <a class="linkHub-item" href="#" target="_blank" rel="noopener">
                <span class="linkHub-ico"><xf:fa icon="fab fa-discord" /></span>
                <span class="linkHub-text">Discord</span>
             </a>
        </div>
    </div>
</div>

.linkHub
{
    color: #fff;
    background: rgba(31, 43, 59, 0.3);
    border: 1px solid rgba(49, 67, 93, 0.5);
    border-radius: 8px;
    margin: 12px 0 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;

    .linkHub-body
    {
        padding: 10px;

        .linkHub-grid
        {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;

            .linkHub-item
            {
                position: relative;
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 12px;
                border-radius: 10px;
                background: #131c2a;
                border: 1px solid #31435d;
                color: #fff;
                text-decoration: none;
                overflow: hidden;
                transition: all .3s ease;
                backface-visibility: hidden;
                will-change: transform;

                .linkHub-ico
                {
                    width: 28px;
                    height: 28px;
                    min-width: 28px;
                    border-radius: 999px;
                    display: grid;
                    place-items: center;
                    background: #1b2a41;
                    color: #cfe3ff;
                    font-size: 14px;
                    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
                }
            }
        }
    }
}