Inconsistent padding in tailwind

I was trying to get border with gradient from top to bottom of purple-900 to purple-600. But i don’t know how to do that.
So I wrapped each card in in a div and provided padding of p-0.5 but It doesn’t seem to be consistent padding from all sides.

Any solutions.

Here is the Code of card layout .

const PlanCard = ({ price, features, onHover, isHovered }) => { return ( <div className="p-2px rounded-lg bg-gradient-to-b from-purple-900 to-purple-500"> <div className={w-full min-w-50 flex-col max-w-xs p-6 rounded-md shadow-lg transition-transform duration-300 ease-in-out ${
isHovered ? ‘bg-gradient-to-b from-purple-900 to-purple-600 text-white scale-110’ : ‘bg-white’
} transition-colors duration-300`}
onMouseEnter={onHover}
onMouseLeave={onHover}
>
{price}

{features.map((feature, index) => (

{feature.title}

{feature.points.map((point, idx) => (
{point}
))}

))}

SELECT

);
};

export default PlanCard;
`

Want to get the consistent padding or border with gradient around the div.