import React from "react";
export default function Example() {
return (
<>
<style>{`
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
`}</style>
<section className="w-full flex flex-col items-center justify-start py-12">
<div className="max-w-3xl text-center px-4">
<h1 className="text-3xl font-semibold">Explore the Library</h1>
<p className="text-sm text-slate-500 mt-2">
A visual collection of our most recent works – each piece crafted
with intention, emotion, and style.
</p>
</div>
<div className="flex flex-wrap items-center justify-center mt-10 mx-auto gap-4">
<img
className="max-w-56 h-80 object-cover rounded-lg hover:-translate-y-1 transition-all duration-300"
src="https://cdn.21st.dev/assets/mirror/ac/ac210d91aa78e473a05ee903ba8f7a2f69cf56ba36eb3af83baf5d68c0fc62ed.jpg"
alt="image"
/>
<img
className="max-w-56 h-80 object-cover rounded-lg hover:-translate-y-1 transition-all duration-300"
src="https://cdn.21st.dev/assets/mirror/7c/7cff13d46320d6b0f91b97aa5e188e3a548ca8f892a78d692c26d1b3ffed951b.jpg"
alt="image"
/>
<img
className="max-w-56 h-80 object-cover rounded-lg hover:-translate-y-1 transition-all duration-300"
src="https://cdn.21st.dev/assets/mirror/91/919380737e900023d0184b54b6b56751579e1f4f35b54910315a6653a958b8ed.jpg"
alt="image"
/>
<img
className="max-w-56 h-80 object-cover rounded-lg hover:-translate-y-1 transition-all duration-300"
src="https://cdn.21st.dev/assets/mirror/4c/4c87b279dfe815cf28bc6267ba3e9eca6fcb745006643711df1f089075d75be9.jpg"
alt="image"
/>
</div>
</section>
</>
);
}
Part of PrebuiltUI — browse the full library on 21st.dev.
