Story Card

<!--
  Day 7: Story card

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Story Card -->
<a
  href="javascript:void(0)"
  class="relative mx-auto flex w-full max-w-md flex-col overflow-hidden rounded-lg bg-white shadow-lg transition hover:opacity-75"
>
  <p
    class="absolute top-7 right-7 rounded-xl bg-indigo-600 px-2 py-1 text-xs font-semibold tracking-wider text-white uppercase"
  >
    Tutorial
  </p>

  <!-- Cover -->
  <img
    src="https://images.unsplash.com/photo-1608222351212-18fe0ec7b13b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
    alt="Story Image"
    class="aspect-16/9 w-full object-cover"
  />
  <!-- END Cover -->

  <!-- Body -->
  <div class="grow p-7">
    <h3 class="mb-1 text-xl font-bold">
      How to build amazing dashboards for your side projects
    </h3>
    <p class="text-sm leading-relaxed text-slate-600">
      A common mistake many dashboard creators make is overwhelming users with
      too much information. Remember, the key is to keep it simple and focused.
      Display only the most relevant data and metrics that directly contribute..
    </p>
  </div>
  <!-- END Body -->

  <!-- Author -->
  <div class="flex items-center justify-between gap-4 bg-slate-50 px-7 py-4">
    <div>
      <p class="font-semibold">John Smith</p>
      <p class="text-sm font-medium text-slate-500">
        July 15, 2023 ∙ 10 min read
      </p>
    </div>
    <div
      class="inline-flex size-12 items-center justify-center rounded-full bg-slate-200 text-slate-400"
    >
      <svg
        class="hi-solid hi-user inline-block size-6"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
          clip-rule="evenodd"
        />
      </svg>
    </div>
  </div>
  <!-- END Author -->
</a>
<!-- END Story Card -->