App Preview Bento

<!-- The big tile is a pure-CSS app mockup (aria-hidden - it illustrates, it does
     not carry content). The bars are gradient divs, so nothing loads or rots. -->
<section class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 p-4 sm:grid-cols-3 sm:p-6">
  <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 sm:col-span-2 sm:row-span-2" aria-hidden="true">
    <div class="flex items-center gap-1.5 border-b border-gray-200 px-4 py-3 dark:border-gray-800">
      <span class="h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700"></span>
      <span class="h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700"></span>
      <span class="h-2.5 w-2.5 rounded-full bg-gray-300 dark:bg-gray-700"></span>
    </div>
    <div class="space-y-3 p-5">
      <div class="h-24 rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600"></div>
      <div class="grid grid-cols-3 gap-3">
        <div class="h-14 rounded-lg bg-gray-100 dark:bg-gray-800"></div>
        <div class="h-14 rounded-lg bg-gray-100 dark:bg-gray-800"></div>
        <div class="h-14 rounded-lg bg-gray-100 dark:bg-gray-800"></div>
      </div>
      <div class="h-3 w-2/3 rounded bg-gray-100 dark:bg-gray-800"></div>
    </div>
  </div>
  <article class="flex min-h-28 flex-col justify-center rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">One dashboard</h3>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Everything in a glance.</p>
  </article>
  <article class="flex min-h-28 flex-col justify-center rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Live data</h3>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Updates as it happens.</p>
  </article>
</section>