minor spacing & color fix for showcase component

This commit is contained in:
Lakshay Bhushan 2024-06-26 21:31:28 +05:30
parent 619614a916
commit 548db981f5

View file

@ -114,13 +114,13 @@ function Feature({
}) {
return (
<div
className={clsx(className, !isActive && "opacity-75 hover:opacity-100")}
className={clsx(className ,"focus:outline-none", !isActive && "opacity-75 hover:opacity-100")}
{...props}
>
<div
className={clsx(
"w-9 rounded-lg",
isActive ? "bg-blue-600" : "bg-slate-500",
isActive ? `bg-indigo-500` : "bg-slate-500",
)}
>
<svg aria-hidden="true" className="h-9 w-9" fill="none">
@ -129,8 +129,8 @@ function Feature({
</div>
<h3
className={clsx(
"mt-6 text-sm font-medium",
isActive ? "text-blue-600" : "text-gray-300",
"mt-4 text-sm font-medium",
isActive ? `text-indigo-300` : "text-gray-300",
)}
>
{feature.name}
@ -138,7 +138,7 @@ function Feature({
<p className="mt-2 font-display text-xl text-gray-200">
{feature.summary}
</p>
<p className="mt-4 text-sm text-gray-300">{feature.description}</p>
<p className="mt-2 text-sm text-gray-300">{feature.description}</p>
</div>
);
}