<div
  class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800"
>
  <div class="flex items-center justify-between">
    <h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
      <span class="i-tabler-tags text-lg"></span>
      标签
    </h2>
    <a
      class="group inline-flex items-center gap-2 text-sm text-gray-600 transition-all hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-300"
      th:href="@{/tags}"
    >
      <span>更多</span>
      <span class="i-tabler-chevron-right -translate-x-1 text-lg transition-all group-hover:translate-x-0"></span>
    </a>
  </div>
  <div class="mt-2 flex flex-wrap gap-2" th:with="tags = ${tagFinder.list(1,50)}">
    <a
      th:each="tag : ${tags}"
      th:href="@{${tag.status.permalink}}"
      th:title="${tag.spec.displayName}"
      class="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-900 hover:bg-gray-200 dark:bg-slate-600 dark:text-slate-50 dark:hover:bg-slate-700 dark:hover:text-slate-100"
    >
      <th:block th:text="|#${tag.spec.displayName}|" />
      <sup th:text="${tag.status.visiblePostCount}"></sup>
    </a>
  </div>
</div>
