Reactjs – Why is the background of my React component gray?

I am trying to design a react component. The design is almost what I want it to be but why do I keep getting this weird gray bar behind my "Get Insured" button.

/* eslint-disable react/prop-types */


const InsuranceCard = ({ title, image, tags }) => (
  <div className="bg-gray-800 rounded-xl overflow-hidden shadow-lg">
    <div className="relative h-48">
      <img src={image} alt={title} className="w-full h-full object-cover" />
      <div className="absolute inset-0 bg-black bg-opacity-40"></div>
      <div className="absolute bottom-0 left-0 p-4 text-white">
        <h3 className="text-sm font-semibold mb-1">Family Travel Insurance</h3>
        <h2 className="text-xl font-bold mb-2">{title}</h2>
        <div className="flex space-x-2">
          {tags.map((tag, index) => (
            <span key={index} className="text-xs bg-gray-500 bg-opacity-50 px-2 py-1 rounded">
              {tag}
            </span>
          ))}
        </div>
      </div>
    </div>
    <div className="p-4">
      <button className=" bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
        Get Insured
      </button>
    </div>
  </div>
);

const TravelInsurance = () => {
  const insuranceOptions = [
    {
      title: "Peace of Mind for the Whole Family",
      subtitle: "Family Travel Insurance",
      image: "https://images.unsplash.com/photo-1475503572774-15a45e5d60b9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      tags: ["Family Medical", "Trip Cancellation", "Baggage"]
    },
    {
      title: "Ensure a worry-free trip to London",
      subtitle: "Family Travel Insurance",
      image: "https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      tags: ["Family Medical", "Trip Cancellation", "Baggage"]
    },
    {
      title: "Explore Korea with Confidence",
      subtitle: "Family Travel Insurance",
      image: "https://plus.unsplash.com/premium_photo-1716968595130-3df477c0087d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      tags: ["Family Medical", "Trip Cancellation", "Baggage"]
    }
  ];

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold text-gray-800 mb-2">Secure Your Trips</h1>
      <p className="text-gray-400 mb-6">Ensure peace of mind on your travels with our comprehensive travel insurance plans.</p>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {insuranceOptions.map((option, index) => (
          <InsuranceCard key={index} {...option} />
        ))}
      </div>
    </div>
  );
};

export default TravelInsurance;

The result should be this-

But I keep getting this-