XMehdi01's questions

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:

Eu quero assim:

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

Estou trabalhando em um componente React usando Tailwind CSS e estou tentando obter um layout específico. Eu tenho um divcom uma imagem e dois parágrafos dentro dela. Quero que os parágrafos sejam centralizados horizontal e verticalmente divpara que apareçam no centro da imagem.

Aqui está meu código atual:

<div className="flex flex-col items-center justify-center text-center">
  <img src="img/slider1.png" alt="slider1" className="mb-4" />
  <p className="font-bold">This paragraph is full of cats</p>
  <p>This paragraph is not.</p>
</div>

Apesar de usar items-centere justify-center, o texto não está alinhado exatamente no centro da imagem. Quero que ambos os parágrafos sejam posicionados no centro, tanto horizontal quanto verticalmente, dentro do arquivo div.

Quaisquer sugestões ou correções à minha abordagem atual seriam muito apreciadas. Obrigado!