ReactJS design roadmap timeline

Question

So I have the design I want to make. Basically it's a timeline that goes from the bottom left corner to the top right corner of the page. Additionally, I need to place some div elements between the rows.

I also want it to be responsive, specifically the length of it will be reduced, but I still want the lines to protrude upwards.

Any suggestions on how to achieve this using ReactJS and TailwindCSS?

The examples I found on the internet are online horizontal and vertical timeline styles. There are no examples of bending timelines

Answer 1

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.