<div class="inline-flex flex-col">
    <ul class="inline-grid grid-flow-col gap-4">
        <li>
            <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
                href="{{ $twitter }}">Twitter</a>
        </li>

        <li>
            <span>&centerdot;</span>
        </li>

        <li>
            <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
                href="{{ $telegram }}">Telegram</a>
        </li>

        <li>
            <span>&centerdot;</span>
        </li>

        <li>
            <a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
                href="{{ $newsletter }}">Newsletter</a>
        </li>
    </ul>

    @if(! request()->routeIs('tip.index'))
        <div class="mt-3">
            <a href="/" class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900">
                All tips
            </a>
        </div>
    @endif
</div>
