Blog Posts List

<!--
  Day 13: Blog posts list

  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
-->

<!-- Blog Posts List -->
<div
  class="relative mx-auto grid w-full max-w-lg grid-cols-1 gap-3 rounded-3xl bg-white/40 p-3 shadow-sm shadow-slate-300 backdrop-blur-xs"
>
  <nav
    class="divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white"
  >
    <a
      href="javascript:void(0)"
      class="group flex items-center justify-between p-4 text-gray-700 hover:bg-gray-50 hover:text-gray-700 active:bg-white"
    >
      <div class="flex items-center gap-4">
        <div
          class="hidden h-16 w-24 flex-none items-center justify-center rounded-sm bg-indigo-500 text-xs font-semibold tracking-wide text-white uppercase sm:flex"
        >
          Tutorial
        </div>
        <div>
          <p class="mb-0.5 text-sm font-semibold">
            Mastering CSS Grid: A Comprehensive Guide for Web Developers
          </p>
          <p class="text-sm font-medium text-gray-500">
            Oct 12, 2023 · 8 min read
          </p>
        </div>
      </div>
      <svg
        class="hi-mini hi-chevron-right inline-block size-5 text-gray-400 group-hover:text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex items-center justify-between p-4 text-gray-700 hover:bg-gray-50 hover:text-gray-700 active:bg-white"
    >
      <div class="flex items-center gap-4">
        <div
          class="hidden h-16 w-24 flex-none items-center justify-center rounded-sm bg-orange-500 text-xs font-semibold tracking-wide text-white uppercase sm:flex"
        >
          Insights
        </div>
        <div>
          <p class="mb-0.5 text-sm font-semibold">
            The Future of Web Development: Trends to Watch
          </p>
          <p class="text-sm font-medium text-gray-500">
            Sep 25, 2023 · 20 min read
          </p>
        </div>
      </div>
      <svg
        class="hi-mini hi-chevron-right inline-block size-5 text-gray-400 group-hover:text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex items-center justify-between p-4 text-gray-700 hover:bg-gray-50 hover:text-gray-700 active:bg-white"
    >
      <div class="flex items-center gap-4">
        <div
          class="hidden h-16 w-24 flex-none items-center justify-center rounded-sm bg-emerald-500 text-xs font-semibold tracking-wide text-white uppercase sm:flex"
        >
          Tips
        </div>
        <div>
          <p class="mb-0.5 text-sm font-semibold">
            Optimizing Website Performance: Tips and Best Practices
          </p>
          <p class="text-sm font-medium text-gray-500">
            Sep 22, 2023 · 7 min read
          </p>
        </div>
      </div>
      <svg
        class="hi-mini hi-chevron-right inline-block size-5 text-gray-400 group-hover:text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex items-center justify-between p-4 text-gray-700 hover:bg-gray-50 hover:text-gray-700 active:bg-white"
    >
      <div class="flex items-center gap-4">
        <div
          class="hidden h-16 w-24 flex-none items-center justify-center rounded-sm bg-indigo-500 text-xs font-semibold tracking-wide text-white uppercase sm:flex"
        >
          Tutorial
        </div>
        <div>
          <p class="mb-0.5 text-sm font-semibold">
            Building Scalable and Secure Web Applications with Node.js
          </p>
          <p class="text-sm font-medium text-gray-500">
            Sep 16, 2023 · 3 min read
          </p>
        </div>
      </div>
      <svg
        class="hi-mini hi-chevron-right inline-block size-5 text-gray-400 group-hover:text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex items-center justify-between p-4 text-gray-700 hover:bg-gray-50 hover:text-gray-700 active:bg-white"
    >
      <div class="flex items-center gap-4">
        <div
          class="hidden h-16 w-24 flex-none items-center justify-center rounded-sm bg-pink-500 text-xs font-semibold tracking-wide text-white uppercase sm:flex"
        >
          Editorial
        </div>
        <div>
          <p class="mb-0.5 text-sm font-semibold">
            Responsive Web Design: Crafting Websites for All Devices
          </p>
          <p class="text-sm font-medium text-gray-500">
            Sep 12, 2023 · 14 min read
          </p>
        </div>
      </div>
      <svg
        class="hi-mini hi-chevron-right inline-block size-5 text-gray-400 group-hover:text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </a>
    <a
      href="javascript:void(0)"
      class="group flex items-center justify-between p-4 text-gray-700 hover:bg-gray-50 hover:text-gray-700 active:bg-white"
    >
      <div class="flex items-center gap-4">
        <div
          class="hidden h-16 w-24 flex-none items-center justify-center rounded-sm bg-orange-500 text-xs font-semibold tracking-wide text-white uppercase sm:flex"
        >
          Insights
        </div>
        <div>
          <p class="mb-0.5 text-sm font-semibold">
            Frontend vs. Backend Development: Understanding the Differences
          </p>
          <p class="text-sm font-medium text-gray-500">
            Aug 28, 2023 · 8 min read
          </p>
        </div>
      </div>
      <svg
        class="hi-mini hi-chevron-right inline-block size-5 text-gray-400 group-hover:text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </a>
  </nav>
</div>
<!-- END Blog Posts List -->