Ribbon At Corner

      <div className="bg-white text-black h-[520px] w-[400px] rounded-xl shadow-xl  px-6 flex flex-col relative">
        <div className="absolute -right-2 -top-2 aspect-square w-36 overflow-hidden rounded-sm">
          <div className="absolute left-0 top-0 h-2 w-2 bg-yellow-700 " />
          <div className="absolute bottom-0 right-0 h-2 w-2 bg-yellow-700 " />
          <div className="absolute bottom-0 right-0 w-56 origin-bottom-right rotate-45">
            <div
              className={`w-full py-1.5 text-center text-xs font-semibold uppercase tracking-wider shadow-sm bg-yellow-400`}
            >
              Most Popular
            </div>
          </div>
        </div>
        <div className="space-y-4">
          <div className="space-">
            <h3 className="font-bold text-2xl">Solar Plus</h3>
            <p className="text-gray-600 text-sm">
              Complete home energy solution
            </p>
          </div>
          <div className="pt-4">
            <span className="text-4xl font-bold">$299</span>
            <span className="text-gray-600">/month</span>
          </div>
 
          <p className="text-sm text-gray-600 py-4">
            Transform your home into a sustainable powerhouse with our
            comprehensive energy solution.
          </p>
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Check className="h-5 w-5 text-green-500" />
              <span className="text-sm">Solar Panel Installation</span>
            </div>
            <div className="flex items-center gap-2">
              <Check className="h-5 w-5 text-green-500" />
              <span className="text-sm">Battery Storage System</span>
            </div>
            <div className="flex items-center gap-2">
              <Check className="h-5 w-5 text-green-500" />
              <span className="text-sm">24/7 Monitoring</span>
            </div>
            <div className="flex items-center gap-2">
              <Check className="h-5 w-5 text-green-500" />
              <span className="text-sm">Mobile App Access</span>
            </div>
          </div>
          <button className="w-full bg-green-500 text-white py-3 rounded-lg mt-6 hover:bg-green-600 transition-colors">
            Get Started
          </button>
        </div>
      </div>

 <div className="absolute -right-2 -top-2 aspect-square w-36 overflow-hidden rounded-sm">
    <div className="absolute left-0 top-0 h-2 w-2 bg-yellow-700 " />
    <div className="absolute bottom-0 right-0 h-2 w-2 bg-yellow-700 " />
    <div className="absolute bottom-0 right-0 w-56 origin-bottom-right rotate-45">
        <div
        className={`w-full py-1.5 text-center text-xs font-semibold uppercase tracking-wider shadow-sm bg-yellow-400`}
            >
        Most Popular
    </div>
    </div>
</div>