Início / coding / Perguntas / 77889334
Accepted
XM01 - stands with Palestine
Asked: 2024-01-27 06:40:28 +0800 CST

Exibindo títulos e conteúdos correspondentes às setas no componente React

  • 772

Atualmente estou trabalhando em um componente React chamado PolitiqueContent, onde exibo informações com setas apontando para diferentes seções. Cada seta está associada a um título e conteúdo, e estou enfrentando dificuldades para conseguir a exibição desejada.

Este é o meu código atual:

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;

Saída do meu código:

insira a descrição da imagem aqui

Eu quero assim:

insira a descrição da imagem aqui

Agradeço qualquer orientação ou sugestão sobre como estruturar o JSX ou modificar meu código para atingir o layout pretendido. Agradeço antecipadamente por sua ajuda

reactjs

1 respostas

  1. Best Answer

    Você pode considerar usar um sistema de grade CSS, com a imagem como plano de fundo. Com linhas e colunas definidas, você pode ter a ordem do DOM igual à ordem implícita na numeração.

    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>

    • 1

relate perguntas