React组件PolitiqueContent箭头对应标题内容布局实现求助

我正在开发名为PolitiqueContent的React组件，需要实现箭头指向对应板块的标题与内容展示，目前无法达到预期布局效果。

当前代码：

import React from "react";

const PolitiqueConeten = () => {
  return (
    <div className="flex justify-center">
      {/* First Arrows  */}
      {/* Title */}
      <h2>Title 1</h2>
      <br />
      {/* Content */}
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
        quibusdam?
      </p>
      {/* Third Arrows  */}
      <h2>Title 3</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga,
        laboriosam.
      </p>
      <img
        className="w-5/6"
        src="img/backgrounddPool.png"
        alt="backroundPool"
      />
      {/* Second Arrows  */}
      <h2>Title 2</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo,
        accusamus?
      </p>
      {/* Forth Arrows  */}
      <h2>Title 4</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas,
        perspiciatis!
      </p>
    </div>
  );
};

export default PolitiqueConeten;

当前效果：

期望效果：

要实现预期的对称布局，需调整JSX结构，将内容按「左上、左下、右上、右下」分组，结合Tailwind布局类控制排列逻辑：

调整后的代码 #

import React from "react";

const PolitiqueContent = () => {
  // 修复组件名称拼写错误（原PolitiqueConeten改为PolitiqueContent）
  return (
    <div className="container mx-auto px-4 py-8">
      {/* 外层网格布局，划分中间图片区与两侧文本区 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
        {/* 左侧上下文本块 */}
        <div className="flex flex-col gap-12">
          {/* Title 1 区域 */}
          <div className="flex flex-col items-center text-center">
            {/* 示例箭头，可替换为设计所需的SVG图标 */}
            <div className="mb-2 text-lg">↑</div>
            <h2 className="text-xl font-bold">Title 1</h2>
            <p className="mt-2">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit, quibusdam?
            </p>
          </div>
          {/* Title 3 区域 */}
          <div className="flex flex-col items-center text-center">
            <div className="mb-2 text-lg">↑</div>
            <h2 className="text-xl font-bold">Title 3</h2>
            <p className="mt-2">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, laboriosam.
            </p>
          </div>
        </div>

        {/* 中间图片区 */}
        <div className="col-span-1">
          <img
            className="w-full h-auto"
            src="img/backgrounddPool.png"
            alt="backroundPool"
          />
        </div>

        {/* 右侧上下文本块 */}
        <div className="flex flex-col gap-12">
          {/* Title 2 区域 */}
          <div className="flex flex-col items-center text-center">
            <div className="mb-2 text-lg">↑</div>
            <h2 className="text-xl font-bold">Title 2</h2>
            <p className="mt-2">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, accusamus?
            </p>
          </div>
          {/* Title 4 区域 */}
          <div className="flex flex-col items-center text-center">
            <div className="mb-2 text-lg">↑</div>
            <h2 className="text-xl font-bold">Title 4</h2>
            <p className="mt-2">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, perspiciatis!
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PolitiqueContent;

关键调整说明 #

1. 结构重构：将四个文本块拆分为左右两组，每组垂直排列两个块，中间放置图片，匹配期望的对称布局；
2. 布局控制：
   • 外层用grid实现响应式布局，中等屏幕及以上自动分成3列；
   • 左右文本组用flex flex-col垂直排列，gap-12控制块间距；
   • 文本块内部用items-center text-center让内容居中，配合箭头实现指向效果；
3. 细节修复：修正组件名称拼写错误，避免后续引用问题；
4. 箭头适配：示例箭头可替换为设计稿中的SVG图标，如需精准指向，可给箭头添加relative定位类调整位置。

内容的提问来源于stack exchange，提问作者TAHER El Mehdi