使用 tailwind css 两列之间的响应式分隔符

Question

受运球设计的启发，两列之间用中间的线或文字隔开，我尝试做同样的事情，但我无法在上面和下面的竖线显示中间的或文字如果它不是移动设备，则使用相同或文本的水平分隔符。

这是我试图模仿的设计

这是我的代码以及 tailwind playground

<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-1xl sm:p-20">
    <div class="grid sm:grid-cols-3 gap-4">
      <div>
        <h1 class="font-bold text-blue-500 text-lg">I want to sell</h1>
        <p class="text-sm font-light text-gray-400 pt-4 pb-4">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        <button class="bg-blue-500 text-white font-bold py-2 px-4">Sell</button>
      </div>
      <div class="or-divider">
        <p class="font-bold text-gray-500 rounded-full bg-gray-50 flex items-center justify-center text-sm" style="height: 50px; width: 50px;">or</p>
      </div>
      <div>
        <h1 class="font-bold text-blue-500 text-lg">I want to buy</h1>
        <p class="text-sm font-light text-gray-400 pt-4 pb-4">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        <button class="bg-blue-500 text-white font-bold py-2 px-4">Buy</button>
      </div>
    </div>
  </div>
</div>

@tailwind base;
@tailwind components;
@tailwind utilities;

.or-divider:after, .or-divider:before {
  display: block;
  content: '';
  width: 2px;
  background-color: #9994;
  height: 100%;
}

https://play.tailwindcss.com/detgHQImBz?file=css

Answer 1

根据你的代码，我做了如下修改

将网格模板从 3 列更改为 2 以适应大于或等于小的屏幕尺寸
使用border-r class当屏幕尺寸大于或等于小时在第一列右侧创建垂直线
使用border-b class 当屏幕尺寸小于小
absolute 将“或”对象 relative 定位到第一个元素

下面是代码片段：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-1xl sm:p-20">
    <div class="grid sm:grid-cols-2 gap-4">
      <div class="border-b sm:border-b-0 sm:border-r p-8 relative">
        <h1 class="font-bold text-blue-500 text-lg">I want to sell</h1>
        <p class="text-sm font-light text-gray-400 pt-4 pb-4">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        <button class="bg-blue-500 text-white font-bold py-2 px-4">Sell</button>
        <div class="hidden sm:block absolute right-0 transform translate-x-7 top-1/2 -translate-y-7">
          <p class="font-bold text-gray-500 rounded-full bg-gray-50 flex items-center justify-center text-sm" style="height: 50px; width: 50px;">or</p>
        </div>
        <div class="sm:hidden absolute transform bottom-0 left-1/2 translate-y-6 -translate-x-7">
          <p class="font-bold text-gray-500 rounded-full bg-gray-50 flex items-center justify-center text-sm" style="height: 50px; width: 50px;">or</p>
        </div>
      </div>
      <div class="p-8">
        <h1 class="font-bold text-blue-500 text-lg">I want to buy</h1>
        <p class="text-sm font-light text-gray-400 pt-4 pb-4">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        <button class="bg-blue-500 text-white font-bold py-2 px-4">Buy</button>
      </div>
    </div>
  </div>
</div>

使用 tailwind css 两列之间的响应式分隔符

responsive divider between two column using tailwind css

css

responsive-design

tailwind-css