ReactJS 디자인 로드맵 타임라인

Question

그래서 만들고 싶은 디자인이 생겼네요. 기본적으로 페이지의 왼쪽 하단에서 오른쪽 상단으로 이동하는 타임라인입니다. 또한 행 사이에 일부 div 요소를 배치해야 합니다.

반응형도 되고 싶고, 특히 길이는 줄어들겠지만 그래도 선은 위로 튀어나왔으면 좋겠어요.

ReactJS와 TailwindCSS를 사용하여 이를 달성하는 방법에 대한 제안 사항이 있나요?

인터넷에서 찾은 예는 온라인 가로 및 세로 타임라인 스타일입니다. 타임라인을 구부리는 예는 없습니다

Answer 1

제공해주신 이미지와 비슷한 타임라인을 주로 grid를 사용하여 만들었습니다.

제가 만든 예에는 3개의 맞춤형 유틸리티가 있습니다.

main.css:

으아아아

1. borderGray 클래스는 요소의 상단과 하단에 회색 테두리를 만들고 텍스트를 중앙에 배치합니다.
2. textClass 负责 font-size 반응성. 이 클래스는 완전히 변경될 수 있습니다. 여기는 매우 편리해 보입니다.
3. slantedLine 클래스는 왼쪽 하단에서 오른쪽 상단까지 요소를 통과하는 대각선을 만듭니다. 이것이 제가 한때 얻은 대답입니다: draw 대각선 CSS in div background

---

이제 HTML로 이동하세요.

반응형 디자인에 여러 변형을 사용하려는 경우를 대비하여 화면 크기에 따라 서로 변경할 수 있는 세 가지 변형을 만들었습니다. 이러한 변형은 다음과 같습니다.

내부는 다음과 같습니다.

HTML:

으아아아

테일윈드 플레이

---

설명:

이러한 변형에는 세 가지 차이점이 있습니다.

1. col-span-{n} 텍스트 컨테이너당. 문서
2. grid-cols-{n} 和 grid-rows-{n}. Docs-1 Docs-2
3. grid 内每个元素的 col-start-{n} 和 row-start-{n} 내의 각 요소에 대한 col-start-{n} 및 row-start-{n}. 두 번째 변형으로 시연해 보겠습니다. 이 클래스를 제거하여 어떻게 작동하는지 살펴보겠습니다.

   모든 이상한 요소는 단지 텍스트 영역일 뿐입니다. 필요한 텍스트/링크를 표시하기 위해 이러한 div에 단락을 삽입합니다.

   slantedLine 각 짝수 요소는 대각선 클래스()의 영역입니다. 대각선은 왼쪽 하단에서 오른쪽 상단으로 이어집니다. 이러한 선이 있는 두 요소를 함께 배치하면 위쪽 및 아래쪽 대각선 테두리 효과를 얻을 수 있습니다.

   함께:

   🎜🎜

   ---

   원하는 정확한 디자인을 제공하지 못할 수도 있지만 여기서 앞으로 어떻게 나아갈지에 대한 아이디어를 줄 수는 있습니다.

   궁금한 점이 있으면 알려주세요. 도움이 되었으면 좋겠습니다.