Cards

<div class="card preset-filled-surface-100-900 p-4">...</div>

---
const imgSrc =
	'https://images.unsplash.com/photo-1463171515643-952cee54d42a?q=80&w=450&h=190&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
---

<a
	href="#"
	class="card block preset-filled-surface-100-900 border border-surface-200-800 card-hover divide-y divide-surface-200-800 overflow-hidden max-w-md"
>
	{/* Header */}
	<header>
		<img src={imgSrc} class="grayscale hue-rotate-90 w-full aspect-[21/9]" alt="banner" />
	</header>
	{/* Article */}
	<article class="p-4 space-y-4">
		<div>
			<h2 class="h6">Announcements</h2>
			<h3 class="h3">Skeleton is Awesome</h3>
		</div>
		<p class="opacity-60">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aspernatur provident eveniet eligendi
			cumque consequatur tempore sint nisi sapiente. Iste beatae laboriosam iure molestias cum expedita architecto
			itaque quae rem.
		</p>
	</article>
	{/* Footer */}
	<footer class="p-4 flex justify-between items-center gap-4">
		<small class="opacity-60">By Alex</small>
		<small class="opacity-60">On {new Date().toLocaleDateString()}</small>
	</footer>
</a>