JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="accordion">
            <button class="grey__button button__text black__text">
              <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.7524 16.2702L18.4024 10.6102C18.4962 10.5172 18.5706 10.4066 18.6213 10.2848C18.6721 10.1629 18.6982 10.0322 18.6982 9.90021C18.6982 9.76819 18.6721 9.63749 18.6213 9.51563C18.5706 9.39377 18.4962 9.28317 18.4024 9.19021C18.2151 9.00396 17.9616 8.89941 17.6974 8.89941C17.4333 8.89941 17.1798 9.00396 16.9924 9.19021L11.9924 14.1402L7.04244 9.19021C6.85508 9.00396 6.60163 8.89941 6.33744 8.89941C6.07326 8.89941 5.81981 9.00396 5.63244 9.19021C5.53796 9.28282 5.46279 9.39327 5.41129 9.51514C5.35979 9.63702 5.33299 9.7679 5.33245 9.90021C5.33299 10.0325 5.35979 10.1634 5.41129 10.2853C5.46279 10.4071 5.53796 10.5176 5.63244 10.6102L11.2824 16.2702C11.3761 16.3717 11.4897 16.4527 11.6162 16.5081C11.7427 16.5635 11.8793 16.5921 12.0174 16.5921C12.1555 16.5921 12.2922 16.5635 12.4187 16.5081C12.5451 16.4527 12.6588 16.3717 12.7524 16.2702Z" fill="#242529"></path>
              </svg>
            </button>
            <div class="faq__dropdown">
              <p class="medium__text"></p>
            </div>
          </div>