I created a timeline similar to the image you provided, using mostly grid.

In the example I created, there are 3 custom utilities一个>:

main.css：

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

@layer utilities {
  .borderGray {
    @apply border-y-[1px] border-[lightgray] text-center;
  }

  .textClass {
    @apply m-2 break-words border-2 border-black text-[0.8rem] sm:text-sm md:text-base;
  }

  .slantedLine {
    background: linear-gradient(
      to top left,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) calc(50% - 1px),
      lightgray 50%,
      rgba(0, 0, 0, 0) calc(50% + 1px),
      rgba(0, 0, 0, 0) 100%
    );
  }
}

1. borderGray Class creates gray borders at the top and bottom of the element and centers the text.
2. textClass is responsible for font-size responsiveness. This class can be completely changed. It looks very convenient here.
3. slantedLine Class creates a diagonal line through the element from the lower left corner to the upper right corner. This is the answer I used to get: Drawing diagonal lines in div background CSS

Now, go to HTML.

I created three different variations that can be changed from one to another based on screen size, in case you want to use multiple variations in your responsive design. These variations are as follows:

This is what it looks like under the hood:

HTML：

  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link



  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link



  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link

Tailwind Play

illustrate:

There are three differences between these variants:

1. col-span-{n} for each text container. document
2. grid-cols-{n} and grid-rows-{n}. Docs-1 Docs-2
3. col-start-{n} and row-start-{n} for each element within grid. Docs-1

   Each odd numbered element is just a text area. We insert a paragraph into these divs to display the required text/links:

   Each even-numbered element is a region of diagonal type (slantedLine). The diagonal line goes from the lower left corner to the upper right corner. When we put two elements with such lines together, we get the effect of top and bottom diagonal borders:

   Together:

   ---

   It may not give you the exact design you are looking for, but it can give you an idea of ​​how to move forward from here.

   If you have questions, please let me know. I hope it helps.