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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com