Tailwind实现订阅卡片悬停动画时的层级与边框重叠问题求助

各位好，我用React结合Tailwind CSS写了一个订阅卡片组件，目前功能符合设计预期，但悬停效果上遇到了两个问题，卡了好久没解决，想请大家帮忙看看：

先贴一下我的组件代码：

import React from 'react';

const SubscriptionCard = () => {
  const commonHoverEffect = "transform scale-105 z-10 transition-transform duration-300 hover:scale-110 hover:shadow-[0_10px_25px_rgba(0,0,0,0.2)]";

  return (
    <div className="flex justify-center items-center w-full py-6 relative z-0">
      <div className="flex bg-white rounded-3xl overflow-visible w-[1000px] h-[5vw] shadow-lg relative z-0">
        <div className={`flex-1 p-6 flex flex-col justify-center bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-l-3xl relative z-10 ${commonHoverEffect}`}>
          <label className="text-xs font-semibold uppercase tracking-wide mb-1 opacity-80">Subscription Name</label>
          <input type="text" value='Gold' readOnly className="w-full p-0 text-2xl font-bold bg-transparent border-none text-white focus:outline-none" />
        </div>
        <div className={`flex-1 p-6 flex flex-col justify-center relative z-10 ${commonHoverEffect}`}>
          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Max Users</label>
          <input type="text" value='500' readOnly className="w-full p-0 text-xl font-semibold bg-transparent border-none text-gray-800 focus:outline-none" />
        </div>
        <div className={`flex-1 p-6 flex flex-col justify-center relative z-10 ${commonHoverEffect}`}>
          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Max Discipline</label>
          <input type="text" value='250' readOnly className="w-full p-0 text-xl font-semibold bg-transparent border-none text-gray-800 focus:outline-none" />
        </div>
        <div className={`flex-1 p-6 flex flex-col justify-center relative z-10 ${commonHoverEffect}`}>
          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Max Parameters</label>
          <input type="text" value='125' readOnly className="w-full p-0 text-xl font-semibold bg-transparent border-none text-gray-800 focus:outline-none" />
        </div>
        <div className={`flex-1 p-6 flex flex-col justify-center bg-yellow-100 rounded-r-3xl relative z-10 ${commonHoverEffect}`}>
          <label className="text-xs font-semibold text-yellow-800 uppercase tracking-wide mb-1">Final Amount</label>
          <input type="text" value='1000' readOnly className="w-full p-0 text-2xl font-bold bg-transparent border-none text-yellow-800 focus:outline-none" />
        </div>
      </div>
    </div>
  );
};

export default SubscriptionCard;

现在遇到的具体问题：

1. 边框重叠问题：中间的卡片在悬停时，底部会出现明显的边框重叠，破坏了整体的设计美感；
2. 层级遮挡问题：中间卡片悬停时，它的左侧会被第一个渐变背景的卡片挡住，没法像第一个和最后一个卡片那样完全呈现出3D悬浮的效果。

补充说明：第一个和最后一个卡片的悬停表现是正常的，只有中间的几个卡片有这两个问题，尤其是底部的边框重叠特别显眼。

有没有熟悉Tailwind的朋友能指点一下怎么修复这两个问题呀？我刚接触Tailwind不久，实在摸不着头绪😅

内容来源于stack exchange