代码之家 › 专栏 › 技术社区 › XMehdi01

在React组件中显示与箭头相对应的标题和内容

tailwind-css jsx responsive-design reactjs

0

XMehdi01 · 技术社区 · 9 月前

我目前正在开发一个名为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或修改我的代码以实现预期布局的指导或建议。提前感谢您的帮助

1 回复 | 直到 9 月前

1

Wongjn 9 月前

您可以考虑使用CSS网格系统,将图像作为背景。定义了行和列后,DOM的顺序也可以与编号所暗示的顺序相同。

const PolitiqueConeten = () => {
  return (
    <div className="grid grid-cols-2 grid-rows-2 gap-x-96 gap-y-40 grid-flow-col bg-[url(https://i.imgur.com/BK7sWVj.png)] bg-contain bg-center bg-no-repeat w-[1077px] h-[546px] py-10">
      <div>
        <h2>Title 1</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
          quibusdam?
        </p>
      </div>
      <div>
        <h2>Title 2</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
          quibusdam?
        </p>
      </div>
      <div>
        <h2>Title 3</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
          quibusdam?
        </p>
      </div>
      <div>
        <h2>Title 4</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
          quibusdam?
        </p>
      </div>
    </div>
  );
};


ReactDOM.createRoot(document.getElementById('app')).render(<PolitiqueConeten/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div id="app"></div>