JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion">
  <div class="accordion-title">
    1st Accordion
    <span class="icon"><svg role="presentation" type="arrowdown" height="6" color="dark-grey" viewBox="0 0 58 34"><path
        d="M56.413 9.817c-2.03 2.09-23.47 22.51-23.47 22.51a5.488 5.488 0 0 1-3.94 1.68c-1.43 0-2.86-.56-3.94-1.68 0 0-21.44-20.42-23.48-22.51-2.04-2.09-2.18-5.85 0-8.08 2.17-2.23 5.21-2.4 7.88 0l19.54 18.74 19.54-18.74c2.67-2.4 5.7-2.23 7.87 0 2.18 2.23 2.04 5.99 0 8.08" fill="black"></path></svg></span>
  </div>
  <div class="accordion-body">
    <div class="copy">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium nibh sed quam feugiat, eget dignissim eros mattis. Integer consectetur luctus ex, sed ullamcorper felis aliquet a. Etiam consectetur nunc in mauris molestie maximus. In quis dolor
        scelerisque, convallis nunc ut, viverra magna. Morbi dictum quis nibh at varius. Fusce massa mauris, bibendum at dolor ac, maximus aliquam ante. Morbi id nulla vitae nulla feugiat venenatis ac in nulla. Proin ipsum libero, tristique et massa malesuada,
        aliquet fringilla nunc. Nullam ut lectus nec massa ultrices suscipit.</p>
    </div>
  </div>
</div>

<div class="<accordion></accordion>">
  <div class="accordion-title">
    2nd Accordion
    <span class="icon"><svg role="presentation" type="arrowdown" height="6" color="dark-grey" viewBox="0 0 58 34"><path
        d="M56.413 9.817c-2.03 2.09-23.47 22.51-23.47 22.51a5.488 5.488 0 0 1-3.94 1.68c-1.43 0-2.86-.56-3.94-1.68 0 0-21.44-20.42-23.48-22.51-2.04-2.09-2.18-5.85 0-8.08 2.17-2.23 5.21-2.4 7.88 0l19.54 18.74 19.54-18.74c2.67-2.4 5.7-2.23 7.87 0 2.18 2.23 2.04 5.99 0 8.08" fill="black"></path></svg></span>
  </div>
  <div class="accordion-body">
    <div class="copy">
      <p>Pellentesque pulvinar lobortis dui, in malesuada mi vulputate nec. Phasellus tincidunt sem enim, nec vestibulum felis ultrices quis. Donec sed feugiat massa. Nam consequat lacinia tellus quis scelerisque. Quisque in...

CSS

.accordion {
  background: pink;
  overflow: hidden;
}

.accordion-title {
  padding: 5px;
  background: #fff;
  color: black;
}

.accordion-body {
  max-height: 0;
  transition: max-height .3s ease;
}

.open .accordion-body {
  max-height: 1000px;
}

/* icon */ 

.icon {
  margin-left: 5px;
}

.icon svg {
  transform: rotate(0deg);
  position: relative;
  transition: transform 0.2s ease;
}

.open svg {
  transform: rotate(180deg);
}

/* General shiz */

body {
  background: #eee;
}

.copy {
  padding: 5px;
}

JavaScript

window.addEventListener('click', (e) => {
  if (!e.target.classList.contains('accordion-title')) return;

  const parent = e.target.parentElement
  if (parent.classList.contains('open')) {
    parent.classList.remove('open')
  } else {
    parent.classList.add('open')
  }
})