<div
  class="w-full overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800"
>
  <h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
    <span class="i-tabler-category text-lg"></span>
    <th:block th:text="#{widget.categories.title}"></th:block>
  </h2>
  <div class="mt-2" th:with="categories = ${categoryFinder.listAsTree()}">
    <ul class="space-y-1">
      <li th:replace="~{modules/category-tree :: single(categories=${categories})}" />
    </ul>
  </div>
</div>
