Tailwind UI Pattern Registry for humans and agents

wiki encyclopedia knowledge-base infobox references article tree-nav classic

Wiki Article

Encyclopedia-style wiki layout with a category tree, contents box, infobox, references, and see-also links.

classic Responsive
Live Preview

Sections

topbarcategory-treebreadcrumbarticleinfoboxcontentsreferencessee-alsocategory-footer

Patterns used

sidebar/toc-indexbreadcrumb/base
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Glasswing Butterfly — Field Wiki</title>
  <meta name="description" content="An encyclopedia-style wiki article layout with a category tree, contents box, infobox, references, and see-also links." />
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
  <link rel="stylesheet" href="https://webspire.de/webspire-components.css">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap" rel="stylesheet" />
  <style>
    body { font-family: 'Inter', sans-serif; }
    .article-body { font-family: 'Source Serif 4', Georgia, serif; }
    .article-body p { margin-top: 0.85rem; line-height: 1.7; }
    .article-body h2 { font-family: 'Inter', sans-serif; }
  </style>
</head>
<body class="bg-white text-slate-800">

  <!-- Top bar -->
  <header class="border-b border-slate-200">
    <div class="mx-auto flex max-w-7xl items-center gap-4 px-4 py-2.5 sm:px-6">
      <a href="#" class="flex items-center gap-2 font-bold text-slate-900">
        <span class="flex h-7 w-7 items-center justify-center rounded bg-slate-800 text-sm text-white">F</span>
        Field Wiki
      </a>
      <form role="search" action="#" class="ml-auto flex w-full max-w-sm">
        <label for="q" class="sr-only">Search the wiki</label>
        <input id="q" name="q" type="search" placeholder="Search articles…" class="w-full rounded-l-md border border-r-0 border-slate-300 px-3 py-1.5 text-sm focus:border-slate-500 focus:outline-none" />
        <button type="submit" class="rounded-r-md border border-l-0 border-slate-300 bg-slate-50 px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100">Go</button>
      </form>
    </div>
  </header>

  <div class="mx-auto flex max-w-7xl gap-8 px-4 py-8 sm:px-6">
    <!-- Category tree -->
    <aside class="hidden w-56 shrink-0 lg:block" aria-label="Categories">
      <nav class="sticky top-8 text-sm">
        <p class="px-2 text-xs font-semibold uppercase tracking-wide text-slate-400">Navigation</p>
        <ul class="mt-2 space-y-0.5">
          <li><a href="#" class="block rounded px-2 py-1 text-slate-600 hover:bg-slate-100">Main page</a></li>
          <li><a href="#" class="block rounded px-2 py-1 text-slate-600 hover:bg-slate-100">Recent changes</a></li>
          <li><a href="#" class="block rounded px-2 py-1 text-slate-600 hover:bg-slate-100">Random article</a></li>
        </ul>
        <p class="mt-5 px-2 text-xs font-semibold uppercase tracking-wide text-slate-400">Categories</p>
        <ul class="mt-2 space-y-0.5">
          <li>
            <details open>
              <summary class="cursor-pointer rounded px-2 py-1 font-medium text-slate-700 hover:bg-slate-100">Insects</summary>
              <ul class="ml-3 mt-0.5 space-y-0.5 border-l border-slate-200 pl-2">
                <li><a href="#" class="block rounded px-2 py-1 text-slate-600 hover:bg-slate-100">Beetles</a></li>
                <li><a href="#" aria-current="page" class="block rounded bg-slate-100 px-2 py-1 font-medium text-slate-900">Butterflies</a></li>
                <li><a href="#" class="block rounded px-2 py-1 text-slate-600 hover:bg-slate-100">Bees</a></li>
              </ul>
            </details>
          </li>
          <li><details><summary class="cursor-pointer rounded px-2 py-1 font-medium text-slate-700 hover:bg-slate-100">Birds</summary></details></li>
          <li><details><summary class="cursor-pointer rounded px-2 py-1 font-medium text-slate-700 hover:bg-slate-100">Plants</summary></details></li>
        </ul>
      </nav>
    </aside>

    <!-- Article -->
    <main class="min-w-0 flex-1">
      <nav aria-label="Breadcrumb" class="text-xs text-slate-400">
        <ol class="flex flex-wrap gap-1">
          <li><a href="#" class="hover:text-slate-600">Insects</a></li><li aria-hidden="true">›</li>
          <li><a href="#" class="hover:text-slate-600">Butterflies</a></li><li aria-hidden="true">›</li>
          <li><span class="text-slate-600">Glasswing</span></li>
        </ol>
      </nav>

      <h1 class="mt-2 border-b border-slate-200 pb-2 text-3xl font-bold text-slate-900">Glasswing butterfly</h1>
      <p class="mt-1 text-sm text-slate-400">From Field Wiki, the open nature encyclopedia · Last edited 3 days ago</p>

      <!-- Infobox -->
      <aside class="mt-4 w-full rounded-lg border border-slate-200 bg-slate-50 p-4 text-sm sm:float-right sm:ml-6 sm:w-72" aria-label="Quick facts">
        <p class="text-center font-bold text-slate-900">Greta oto</p>
        <div class="mt-3 flex h-32 items-center justify-center rounded bg-gradient-to-br from-emerald-100 to-sky-100 text-xs text-slate-400">Specimen image</div>
        <dl class="mt-3 divide-y divide-slate-200">
          <div class="flex justify-between gap-4 py-1.5"><dt class="text-slate-500">Order</dt><dd class="font-medium text-slate-800">Lepidoptera</dd></div>
          <div class="flex justify-between gap-4 py-1.5"><dt class="text-slate-500">Family</dt><dd class="font-medium text-slate-800">Nymphalidae</dd></div>
          <div class="flex justify-between gap-4 py-1.5"><dt class="text-slate-500">Wingspan</dt><dd class="font-medium text-slate-800">5.6–6.1 cm</dd></div>
          <div class="flex justify-between gap-4 py-1.5"><dt class="text-slate-500">Range</dt><dd class="font-medium text-slate-800">Central &amp; South America</dd></div>
          <div class="flex justify-between gap-4 py-1.5"><dt class="text-slate-500">Status</dt><dd class="font-medium text-emerald-700">Least concern</dd></div>
        </dl>
      </aside>

      <!-- Contents box -->
      <nav aria-label="Contents" class="mt-4 inline-block rounded-lg border border-slate-200 bg-slate-50 p-4 text-sm">
        <p class="font-semibold text-slate-700">Contents</p>
        <ol class="mt-2 space-y-1 text-slate-600">
          <li><a href="#overview" class="hover:text-slate-900 hover:underline">1 Overview</a></li>
          <li><a href="#appearance" class="hover:text-slate-900 hover:underline">2 Appearance</a></li>
          <li><a href="#behavior" class="hover:text-slate-900 hover:underline">3 Behavior</a></li>
          <li><a href="#references" class="hover:text-slate-900 hover:underline">4 References</a></li>
        </ol>
      </nav>

      <div class="article-body mt-2 text-[15px] text-slate-700">
        <p id="overview">The <strong>glasswing butterfly</strong> (<em>Greta oto</em>) is a brush-footed butterfly known for its transparent wings, an adaptation that makes it difficult for predators to track in flight. The tissue between the veins is largely free of the coloured scales found on most butterflies.<sup class="text-blue-700">[1]</sup></p>

        <h2 id="appearance" class="mt-6 border-b border-slate-200 pb-1 text-xl font-bold text-slate-900">Appearance</h2>
        <p>Unlike opaque-winged species, the glasswing minimises light reflection through a fine, irregular nanostructure on the wing surface. This anti-reflective coating transmits a high proportion of incident light, lending the wings their characteristic clarity.<sup class="text-blue-700">[2]</sup></p>

        <h2 id="behavior" class="mt-6 border-b border-slate-200 pb-1 text-xl font-bold text-slate-900">Behavior</h2>
        <p>Adults are strong fliers and undertake seasonal migrations across forest corridors. Males form leks and feed on the nectar of <em>Lantana</em> flowers, from which they also acquire pyrrolizidine alkaloids used in chemical defence.</p>
      </div>

      <!-- References -->
      <section id="references" class="mt-8">
        <h2 class="border-b border-slate-200 pb-1 text-xl font-bold text-slate-900">References</h2>
        <ol class="mt-3 space-y-1.5 text-sm text-slate-600">
          <li id="ref1">1. Binham, R. (2019). <em>Transparency in Lepidoptera</em>. Journal of Insect Optics, 14(2), 88–104.</li>
          <li id="ref2">2. Okafor, L. &amp; Mendes, T. (2021). <em>Nanostructured anti-reflective wings</em>. Nature Biomimetics.</li>
        </ol>
      </section>

      <!-- See also -->
      <section class="mt-8">
        <h2 class="border-b border-slate-200 pb-1 text-xl font-bold text-slate-900">See also</h2>
        <ul class="mt-3 grid gap-1 text-sm text-blue-700 sm:grid-cols-2">
          <li><a href="#" class="hover:underline">Monarch butterfly</a></li>
          <li><a href="#" class="hover:underline">Structural coloration</a></li>
          <li><a href="#" class="hover:underline">Aposematism</a></li>
          <li><a href="#" class="hover:underline">Cloud forest ecology</a></li>
        </ul>
      </section>

      <!-- Category footer -->
      <footer class="mt-8 border-t border-slate-200 pt-3 text-xs text-slate-500">
        <span class="font-semibold text-slate-600">Categories:</span>
        <a href="#" class="ml-1 text-blue-700 hover:underline">Butterflies</a> ·
        <a href="#" class="text-blue-700 hover:underline">Transparent organisms</a> ·
        <a href="#" class="text-blue-700 hover:underline">Fauna of Central America</a>
      </footer>
    </main>
  </div>

</body>
</html>

An encyclopedia-style wiki article — a knowledge-first layout distinct from product docs. Category tree, infobox, contents box, footnote references, and see-also links bring back the information architecture of classic reference sites.