<div class="grid gap-2 p-4 w-80">
<div class="group p-4 rounded border bg-white">
<img
src="https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3"
alt="カード画像"
class="w-full rounded mb-4 h-48 object-cover"
/>
<h3 class="font-bold text-xl group-has-[img]:text-base group-has-[img]:mb-2">
カードのタイトル
</h3>
<p class="text-gray-600 group-has-[img]:text-xs group-has-[img]:leading-relaxed">
ここにカードの説明文が入ります。画像の有無によってテキストのスタイルが自動的に調整されます。
</p>
</div>
<div class="group p-4 rounded border bg-white">
<h3 class="font-bold text-xl group-has-[img]:text-base group-has-[img]:mb-2">
カードのタイトル
</h3>
<p class="text-gray-600 group-has-[img]:text-xs group-has-[img]:leading-relaxed">
ここにカードの説明文が入ります。画像の有無によってテキストのスタイルが自動的に調整されます。
</p>
</div>
</div>
This Pen doesn't use any external CSS resources.