Skip to content

Instantly share code, notes, and snippets.

@Chuloo
Created March 17, 2023 20:08
Show Gist options
  • Save Chuloo/4ba01a620344b00996c3afb784c9a443 to your computer and use it in GitHub Desktop.
Save Chuloo/4ba01a620344b00996c3afb784c9a443 to your computer and use it in GitHub Desktop.
Feature Card Component
export function FeatureCard({
imgUrl,
title,
description,
}: {
imgUrl: string;
title: string;
description: string;
}) {
return (
<>
<div
tabIndex={0}
aria-label="card 1"
className="focus:outline-none flex sm:w-full md:w-5/12 pb-20"
>
<div className="w-20 h-20 relative mr-5">
<div className="absolute top-0 right-0 bg-indigo-100 rounded w-16 h-16 mt-2 mr-1" />
<div className="absolute text-white bottom-0 left-0 bg-[#082491] rounded w-16 h-16 flex items-center justify-center mt-2 mr-3">
<img src={imgUrl} alt={title} />
</div>
</div>
<div className="w-10/12">
<h2
tabIndex={0}
className="focus:outline-none text-lg font-bold leading-tight text-gray-800"
>
{title}
</h2>
<p
tabIndex={0}
className="focus:outline-none text-base text-gray-600 leading-normal pt-2"
>
{description}
</p>
</div>
</div>
</>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment