如何使用 Tailwind 创建垂直时间轴

Question

我尝试使用 tailwind css 重新创建它，但失败了。如何在圆圈之间创建一条垂直线，如图所示？

我正在尝试在时间轴中显示事件列表。 代码链接 https://play.tailwindcss.com/Pfj7oXPjeZ

提前致谢

顺风垂直时间线

Answer 1

试试这个，链接

<div class="container bg-gray-200 mx-auto w-full h-full">
  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute border-dashed border-blue-500 h-full border" style="left: 5.8%"></div>


    <!-- First timeline -->
    <div class="mb-8 flex justify-between items-center w-full">
      <div class="order-2 w-6/12"></div>
      <div class="z-20">
        <div class="my-4 rounded-full h-10 w-10 flex items-center bg-indigo-300 ring-4 ring-indigo-400 ring-opacity-30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
      <div class="order-1 bg-gray-300 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <div class="flex flex-row">
          <h3 class="mb-3 font-bold text-gray-800 text-xl">Status</h3>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="red">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
          </svg>
          <h5 class="mb-3 font-bold text-gray-800 text-xl">Loc</h5>
        </div>

        <p class="text-base leading-snug tracking-wide text-gray-900 text-opacity-100">statusinfo helooooooooooooooooooooooo</p>
      </div>
    </div>


    <!-- Second timeline -->
    <div class="mb-8 flex justify-between items-center w-full">
      <div class="order-2 w-6/12"></div>
      <div class="z-20">
        <div class="my-4 rounded-full h-10 w-10 flex items-center bg-indigo-300 ring-4 ring-indigo-400 ring-opacity-30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
      <div class="order-1 bg-red-200 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <div class="flex flex-row">
          <h3 class="mb-3 font-bold text-gray-800 text-xl">Status</h3>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="red">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
          </svg>
          <h5 class="mb-3 font-bold text-gray-800 text-xl">Loc</h5>
        </div>

        <p class="text-base leading-snug tracking-wide text-gray-900 text-opacity-100">statusinfo helooooooooooooooooooooooo</p>
      </div>
    </div>


    <!-- you can add more time line from here :) -->
  </div>
</div>

快乐编码:)

Answer 2

如果您正在使用 ReactJs，这是一个很好的方法：

  const TimelinePoints = ({activeState}) => {
  return (
    <div className='px-10 flex flex-row justify-between'>
        <div className='text-right  pt-5 '>
            <p className='text-sm'>1st May, '24</p>
            <p className='text-xs text-gray-300'>10:04am</p>
        </div>
        <div className='flex flex-col items-center'>
            <span className={`p-1 rounded-full ${activeState === "1" ? "bg-primary" : "bg-gray-400"} `}></span>
            <span className={`h-16  ${activeState === "1" ? "bg-primary border-2-2 border border-primary" : "border-2-2 border-dashed border border border-gray-400"}`}> </span>
        </div>
        <div className='pt-5 '>
            <p className='text-sm'>Service Started</p>
            <p className='text-xs text-gray-300'>Lorem ipsum dolor sit amet conectur</p>
        </div>
    </div>
  )
}

查看它的外观，使用 ActiveState prop="1" 来标记活动时间线和非活动时间线