JSFiddle - React, Tailwind, and code Playground

React

import { useState } from "react";
import "./styles.css";

const Accordion = ({ title, content }) => {
  const [btnVal, setbtnVal] = useState(false);

  return (
    <div className="accordion-item">
      <button onClick={() => setbtnVal(x => !x)}>{title}</button>
          {btnVal && (
            <p>{content}</p>
          )}
    </div>
  );
};


const textArr = [
  {text: 'Я какое то окошко-1 с текстом аааааа, помогите',
    title: 'Кнопка 1'
  },
  {text: 'Я какое то окошко-2 с текстом аааааа, помогите',
    title: 'Кнопка 2'
  },
  {text: 'Я какое то окошко-3 с текстом аааааа, помогите',
    title: 'Кнопка 3'},
  {text: 'Я какое то окошко-4 с текстом аааааа, помогите',
    title: 'Кнопка 4'}
]

const App = () => {


  return (
    <div className="App">
      {textArr.map(({text, title} , idx) => (
        <div key={idx}>
          <Accordion title={title} content={text} />
        </div>
      ))}
    </div>
  );
}

export default App;