<div class="mb-4">
  <a class="no-underline" href="https://cs.sjoy.lol">
    <h3 class="m-0 text-xl font-bold leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-6 text-center">
      CSS JOY Webring
    </h3>
  </a>
  <div class="flex flex-row justify-center items-center">
    <a class="link--icon icon--20" href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
      {% tablericon "arrow-left" "Previous site" %}
    </a>
    <div class="flex justify-center">
      <a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings" class="icon--bold mx-4 flex flex-row items-center font-semibold p-2 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-pink-500 icon--24">
        {% tablericon "dice-3" "Random site" %}
      </a>
    </div>
    <a class="link--icon icon--20" href="https://webri.ng/webring/cssjoy/next?via=https://coryd.dev/webrings">
      {% tablericon "arrow-right" "Next site" %}
    </a>
  </div>
</div>