Tailwind card alignment

cards.html

<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
      <article class="flex flex-col items-start justify-between">
        <div class="relative w-full">
          <div class="absolute inset-0 bg-violet-500 opacity-80 rounded-2xl"></div>
          <img src="/assets/cat5-bg.jpg" alt="" class="aspect-video w-full rounded-2xl bg-blend-overlay object-cover sm:aspect-2/1 lg:aspect-3/2">
          <div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
        </div>
        <div class="max-w-xl">
          <div class="z-10">
          <!-- ===== post-details.vto TEMPLATE START ===== -->
<div class="mt-8 flex flex-wrap items-center gap-x-4 text-xs">
  <time datetime="Thu Mar 13 2025 09:19:13 GMT+0900 (日本標準時)" class="order-first flex items-center text-zinc-400 dark:text-zinc-500">
    <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span>
    <span class="ml-3">2025-03-13</span>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" fill="currentColor" class="size-6 fill-emerald-400"><path d="M152,128a24,24,0,1,1-24-24A24,24,0,0,1,152,128Z" opacity="0.2"></path><path d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Z"></path></svg>  </time>
  <a href="/category/トラブルシューティング/" data-pagefind-filter="カテゴリーでフィルター" class="relative rounded-md bg-violet-50 px-2 py-1 text-xs font-medium text-violet-600 ring-1 ring-violet-500/10 ring-inset hover:bg-violet-100 no-underline">トラブルシューティング</a>
    <span class="relative px-2 py-1 text-xs font-light text-zinc-600 hover:bg-zinc-50">著者: <a class="no-underline" data-pagefind-filter="著者でフィルター" href="/author/Utano/">Utano</a></span>
  <span class="relative px-2 py-1 text-xs font-light text-zinc-600">読書時間: <span class="font-medium">3分</span></span> 
<span class="relative rounded-md px-2 py-1 text-[0.6rem] font-medium bg-fuchsia-500 ring-1 ring-fuchsia-50 ring-inset text-white">
  人気
  </span></div>
<div class="text-xs/3 text-zinc-500 ml-4 mt-2 flex space-x-2 break-keep">
</div>
<!-- ===== post-details.vto TEMPLATE END ===== -->

          </div>
          <div class="group relative">
            <h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
              <a href="/posts/20250313-パソコンがフリーズした-初心者でもできる7つの対処法-ja/" data-faid="ja-202503-pc-freeze" class="data-fatrigger">
                <span class="absolute inset-0"></span>
                パソコンがフリーズした！初心者でもできる7つの対処法 
              </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">パソコンを使っている最中に急に画面が固まって動かなくなってしまうと、焦ってしまいますよね。忙しいときはイライラしてしまうことも。ただそんなとき、すぐ強制シャットダウンをしたり、コンセントを抜いたりするとデータ損失や状況悪化に繋がりかねません。まずは落ち着いて深呼吸。そしてこれからご紹介する<strong>対処法7選</strong>をお試しください。</p>
          </div>
          
        </div>
      </article>
      <article class="flex flex-col items-start justify-between">
        <div class="relative w-full">
          <div class="absolute inset-0 bg-blue-500 opacity-80 rounded-2xl"></div>
          <img src="/assets/cat1-bg.jpg" alt="" class="aspect-video w-full rounded-2xl bg-blend-overlay object-cover sm:aspect-2/1 lg:aspect-3/2">
          <div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
        </div>
        <div class="max-w-xl">
          <div class="z-10">
          <!-- ===== post-details.vto TEMPLATE START ===== -->
<div class="mt-8 flex flex-wrap items-center gap-x-4 text-xs">
  <time datetime="Thu Feb 27 2025 11:16:29 GMT+0900 (日本標準時)" class="order-first flex items-center text-zinc-400 dark:text-zinc-500">
    <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span>
    <span class="ml-3">2025-02-27</span>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" fill="currentColor" class="size-6 fill-emerald-400"><path d="M152,128a24,24,0,1,1-24-24A24,24,0,0,1,152,128Z" opacity="0.2"></path><path d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Z"></path></svg>  </time>
  <a href="/category/マイクロソフト365/" data-pagefind-filter="カテゴリーでフィルター" class="relative rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-blue-500/10 ring-inset hover:bg-blue-100 no-underline">マイクロソフト365</a>
    <span class="relative px-2 py-1 text-xs font-light text-zinc-600 hover:bg-zinc-50">著者: <a class="no-underline" data-pagefind-filter="著者でフィルター" href="/author/%E7%9F%B3%E5%B7%9D%20%E7%B5%B5%E5%A5%88/">石川 絵奈</a></span>
  <span class="relative px-2 py-1 text-xs font-light text-zinc-600">読書時間: <span class="font-medium">1分</span></span> 
</div>
<div class="text-xs/3 text-zinc-500 ml-4 mt-2 flex space-x-2 break-keep">
</div>
<!-- ===== post-details.vto TEMPLATE END ===== -->

          </div>
          <div class="group relative">
            <h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
              <a href="/posts/20250227-これがタイトル-ja/" data-faid="ja-20250227a" class="data-fatrigger">
                <span class="absolute inset-0"></span>
                これがタイトル
              </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">REPLACE ME. THIS IS THE INTRO TEXT THAT WILL APPEAR ON THE TOP PAGE. ENTER IT BEFORE THE "MORE" TAG JUST BELOW.</p>
          </div>
          
        </div>
      </article>
      <article class="flex flex-col items-start justify-between">
        <div class="relative w-full">
          <div class="absolute inset-0 bg-esoliaamber-500 opacity-80 rounded-2xl"></div>
          <img src="/assets/cat2-bg.jpg" alt="" class="aspect-video w-full rounded-2xl bg-blend-overlay object-cover sm:aspect-2/1 lg:aspect-3/2">
          <div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
        </div>
        <div class="max-w-xl">
          <div class="z-10">
          <!-- ===== post-details.vto TEMPLATE START ===== -->
<div class="mt-8 flex flex-wrap items-center gap-x-4 text-xs">
  <time datetime="Wed Feb 26 2025 10:56:29 GMT+0900 (日本標準時)" class="order-first flex items-center text-zinc-400 dark:text-zinc-500">
    <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span>
    <span class="ml-3">2025-02-26</span>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" fill="currentColor" class="size-6 fill-emerald-400"><path d="M152,128a24,24,0,1,1-24-24A24,24,0,0,1,152,128Z" opacity="0.2"></path><path d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Z"></path></svg>  </time>
  <a href="/category/セキュリティ/" data-pagefind-filter="カテゴリーでフィルター" class="relative rounded-md bg-esoliaamber-50 px-2 py-1 text-xs font-medium text-esoliaamber-600 ring-1 ring-esoliaamber-500/10 ring-inset hover:bg-esoliaamber-100 no-underline">セキュリティ</a>
    <span class="relative px-2 py-1 text-xs font-light text-zinc-600 hover:bg-zinc-50">著者: <a class="no-underline" data-pagefind-filter="著者でフィルター" href="/author/%E3%82%B3%E3%82%B0%E3%83%AC%E3%83%BC%20%E3%83%AA%E3%83%83%E3%82%AF/">コグレー リック</a></span>
  <span class="relative px-2 py-1 text-xs font-light text-zinc-600">読書時間: <span class="font-medium">2分</span></span> 
</div>
<div class="text-xs/3 text-zinc-500 ml-4 mt-2 flex space-x-2 break-keep">
</div>
<!-- ===== post-details.vto TEMPLATE END ===== -->

          </div>
          <div class="group relative">
            <h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
              <a href="/posts/20250226-クリアデスク_クリアスクリーンやってますか-ja/" data-faid="ja-20250226-clear-desk" class="data-fatrigger">
                <span class="absolute inset-0"></span>
                クリアデスク、クリアスクリーンやってますか？
              </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600"><em>クリアデスク、クリアスクリーン</em> と言うポリシーは殆どの組織で使われているでしょう。ちゃんと認識していますか？</p>
          </div>
          
        </div>
      </article>
      <article class="flex flex-col items-start justify-between">
        <div class="relative w-full">
          <div class="absolute inset-0 bg-fuchsia-500 opacity-80 rounded-2xl"></div>
          <img src="/assets/cat3-bg.jpg" alt="" class="aspect-video w-full rounded-2xl bg-blend-overlay object-cover sm:aspect-2/1 lg:aspect-3/2">
          <div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
        </div>
        <div class="max-w-xl">
          <div class="z-10">
          <!-- ===== post-details.vto TEMPLATE START ===== -->
<div class="mt-8 flex flex-wrap items-center gap-x-4 text-xs">
  <time datetime="Sun Jun 12 2022 09:00:00 GMT+0900 (日本標準時)" class="order-first flex items-center text-zinc-400 dark:text-zinc-500">
    <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span>
    <span class="ml-3">2022-06-12</span>
  </time>
  <a href="/category/ネットワーク/" data-pagefind-filter="カテゴリーでフィルター" class="relative rounded-md bg-fuchsia-50 px-2 py-1 text-xs font-medium text-fuchsia-600 ring-1 ring-fuchsia-500/10 ring-inset hover:bg-fuchsia-100 no-underline">ネットワーク</a>
    <span class="relative px-2 py-1 text-xs font-light text-zinc-600 hover:bg-zinc-50">著者: <a class="no-underline" data-pagefind-filter="著者でフィルター" href="/author/%E3%82%AA%E3%83%86%E3%83%AD%20%E3%82%AA%E3%82%B9%E3%82%AB%E3%83%BC/">オテロ オスカー</a></span>
  <span class="relative px-2 py-1 text-xs font-light text-zinc-600">読書時間: <span class="font-medium">1分</span></span> 
</div>
<div class="text-xs/3 text-zinc-500 ml-4 mt-2 flex space-x-2 break-keep">
</div>
<!-- ===== post-details.vto TEMPLATE END ===== -->

          </div>
          <div class="group relative">
            <h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
              <a href="/posts/instructions/" data-faid="ja-20220612a" class="data-fatrigger">
                <span class="absolute inset-0"></span>
                日本語 How to install this theme
              </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600"><strong>日本語</strong> で何らかの切れ味のあるイントロ文をこちらで書く。</p>
          </div>
          
        </div>
      </article>
      <article class="flex flex-col items-start justify-between">
        <div class="relative w-full">
          <div class="absolute inset-0 bg-red-500 opacity-80 rounded-2xl"></div>
          <img src="/assets/cat6-bg.jpg" alt="" class="aspect-video w-full rounded-2xl bg-blend-overlay object-cover sm:aspect-2/1 lg:aspect-3/2">
          <div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
        </div>
        <div class="max-w-xl">
          <div class="z-10">
          <!-- ===== post-details.vto TEMPLATE START ===== -->
<div class="mt-8 flex flex-wrap items-center gap-x-4 text-xs">
  <time datetime="Thu Aug 23 2018 09:00:00 GMT+0900 (日本標準時)" class="order-first flex items-center text-zinc-400 dark:text-zinc-500">
    <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span>
    <span class="ml-3">2018-08-23</span>
  </time>
  <a href="/category/AI活用/" data-pagefind-filter="カテゴリーでフィルター" class="relative rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-600 ring-1 ring-red-500/10 ring-inset hover:bg-red-100 no-underline">AI活用</a>
    <span class="relative px-2 py-1 text-xs font-light text-zinc-600 hover:bg-zinc-50">著者: <a class="no-underline" data-pagefind-filter="著者でフィルター" href="/author/Rick%20Cogley/">Rick Cogley</a></span>
  <span class="relative px-2 py-1 text-xs font-light text-zinc-600">読書時間: <span class="font-medium">1分</span></span> 
</div>
<div class="text-xs/3 text-zinc-500 ml-4 mt-2 flex space-x-2 break-keep">
</div>
<!-- ===== post-details.vto TEMPLATE END ===== -->

          </div>
          <div class="group relative">
            <h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
              <a href="/posts/firstpost/" data-faid="ja-20180823a" class="data-fatrigger">
                <span class="absolute inset-0"></span>
                日本語 This is a post with mastodon comments
              </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600">我が輩は猫でアル Leverage agile frameworks to provide a robust synopsis for high level overviews.
Iterative approaches to corporate strategy foster collaborative thinking to
further the overall value proposition. Organically grow the holistic world view
of disruptive innovation via workplace diversity and empowerment.</p>
          </div>
          
        </div>
      </article>
      <article class="flex flex-col items-start justify-between">
        <div class="relative w-full">
          <div class="absolute inset-0 bg-lime-500 opacity-80 rounded-2xl"></div>
          <img src="/assets/cat4-bg.jpg" alt="" class="aspect-video w-full rounded-2xl bg-blend-overlay object-cover sm:aspect-2/1 lg:aspect-3/2">
          <div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
        </div>
        <div class="max-w-xl">
          <div class="z-10">
          <!-- ===== post-details.vto TEMPLATE START ===== -->
<div class="mt-8 flex flex-wrap items-center gap-x-4 text-xs">
  <time datetime="Mon Apr 16 2018 07:07:27 GMT+0900 (日本標準時)" class="order-first flex items-center text-zinc-400 dark:text-zinc-500">
    <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span>
    <span class="ml-3">2018-04-16</span>
  </time>
  <a href="/category/クラウド/" data-pagefind-filter="カテゴリーでフィルター" class="relative rounded-md bg-lime-50 px-2 py-1 text-xs font-medium text-lime-600 ring-1 ring-lime-500/10 ring-inset hover:bg-lime-100 no-underline">クラウド</a>
    <span class="relative px-2 py-1 text-xs font-light text-zinc-600 hover:bg-zinc-50">著者: <a class="no-underline" data-pagefind-filter="著者でフィルター" href="/author/%E7%9F%B3%E5%B7%9D%20%E7%B5%B5%E5%A5%88/">石川 絵奈</a></span>
  <span class="relative px-2 py-1 text-xs font-light text-zinc-600">読書時間: <span class="font-medium">4分</span></span> 
</div>
<div class="text-xs/3 text-zinc-500 ml-4 mt-2 flex space-x-2 break-keep">
</div>
<!-- ===== post-details.vto TEMPLATE END ===== -->

          </div>
          <div class="group relative">
            <h3 class="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
              <a href="/posts/20180416-攻めのテレワーク-ja/" data-faid="ja-20180416a" class="data-fatrigger">
                <span class="absolute inset-0"></span>
                攻めのテレワーク
              </a>
            </h3>
            <p class="mt-5 line-clamp-3 text-sm/6 text-gray-600"><strong>テレワークとは</strong>　「tele = 離れた所」と「work = 働く」をあわせた造語、日本語です。<a href="http://www.japan-telework.or.jp/intro/tw_about.html" title="一般社団法人テレワーク協会">一般社団法人テレワーク協会</a>では下記のように定義しています:</p>
          </div>
          
        </div>
      </article>

      



    </div>