无法在Tailwind CSS中创建游戏控制器按钮组，求技术帮助

以下是匹配参考效果的游戏手柄按钮组实现代码，包含方向控制区和ABXY动作按钮区：

<div class="flex gap-10 p-8 bg-gray-900 rounded-xl">
  <!-- 方向控制区 -->
  <div class="relative w-32 h-32">
    <button class="absolute top-0 left-1/2 -translate-x-1/2 w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center text-white hover:bg-gray-700 transition-colors">
      ↑
    </button>
    <button class="absolute bottom-0 left-1/2 -translate-x-1/2 w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center text-white hover:bg-gray-700 transition-colors">
      ↓
    </button>
    <button class="absolute left-0 top-1/2 -translate-y-1/2 w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center text-white hover:bg-gray-700 transition-colors">
      ←
    </button>
    <button class="absolute right-0 top-1/2 -translate-y-1/2 w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center text-white hover:bg-gray-700 transition-colors">
      →
    </button>
    <!-- 中间摇杆 -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-14 h-14 bg-gray-700 rounded-full flex items-center justify-center">
      <div class="w-8 h-8 bg-gray-600 rounded-full"></div>
    </div>
  </div>

  <!-- ABXY动作按钮区 -->
  <div class="grid grid-cols-2 gap-4">
    <button class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 transition-colors">
      X
    </button>
    <button class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white text-xl font-bold hover:bg-blue-700 transition-colors">
      Y
    </button>
    <button class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center text-white text-xl font-bold hover:bg-green-700 transition-colors">
      A
    </button>
    <button class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center text-white text-xl font-bold hover:bg-yellow-600 transition-colors">
      B
    </button>
  </div>
</div>

实现说明： #

• 整体用深灰色背景模拟手柄外壳，通过flex布局分隔两个功能区域
• 方向键区域采用relative+absolute定位实现上下左右按钮的对称排列，中间加入摇杆元素增强还原度
• ABXY按钮使用网格布局排列，采用经典的红、蓝、绿、黄配色，添加hover状态的颜色过渡提升交互体验
• 所有尺寸类（如w-32、h-16）可根据需求调整，快速缩放整体组件大小

内容的提问来源于stack exchange，提问作者baran cihan