如何创建顺风锦标赛支架

Question

到目前为止，我已经搭建了一个没有连接线的支架。

我用 tailwindcss 做了这个。我更愿意继续使用带有最少 CSS 的 Tailwind。我在盒子之间建立连接线时遇到问题。这是我想要的一个例子：

我尝试过做很多不同的事情，但我似乎无法弄清楚。如有帮助，将不胜感激。这是我到目前为止的代码：

<div class="flex">
      <div class="w-72 m-8 text-center text-xl">Quarterfinals Round</div>
      <div class="w-72 m-8 text-center text-xl">Semifinals Round</div>
      <div class="w-72 m-8 text-center text-xl">Final Round</div>
  </div>
  <div class="flex items-center">
    <div class="flex-col m-4">
      <div class="bg-gray-900 w-72 h-20 m-4"></div>
      <div class="bg-gray-900 w-72 h-20 m-4"></div>
      <div class="bg-gray-900 w-72 h-20 m-4"></div>
      <div class="bg-gray-900 w-72 h-20 m-4"></div>
    </div>
    <div class="flex-col m-4">
      <div class="bg-gray-900 w-72 h-20 m-4"></div>
      <div class="p-10"></div>
      <div class="bg-gray-900 w-72 h-20 m-4"></div>
    </div>
    <div class="flex-col m-4">
      <div class="bg-gray-900 w-72 h-20 m-4"></div>
    </div>
  </div>

Answer 1

你可以用这个。检查CSS高宽公式调整线条 https://play.tailwindcss.com/iRuzuDuTZh?file=css