JSFiddle - React, Tailwind, and code Playground

HTML

<div class="FAQContainer"> 
    <span class="DesktopAnnounce">
        Frequently Asked Questions
    </span>
    <div class="FAQPanel desktopPanel">
        <div id="faqContent">
            <ul class="FAQ-list">
                <li>
                    <div class="faq-item">
                        <div class="faq-question">
                            What is the answer to life, the universe and everything?
                        </div>
                        <div class="faq-answer">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed justo purus. Fusce venenatis diam vitae nunc interdum, id sollicitudin mauris congue. Fusce ex lorem, placerat vel dictum maximus, commodo at sapien. Vestibulum feugiat, arcu ac sagittis consectetur, enim mi placerat enim, sit amet pretium lorem dolor sit amet nisl. Etiam lacinia ligula consequat, tempus est vitae, posuere lorem. In dictum urna ac nisi aliquam, vel commodo nisi elementum. Proin pulvinar vestibulum iaculis. Praesent sit amet eros imperdiet, pretium libero non, venenatis orci. Sed sit amet varius purus. Sed convallis neque sed posuere porta. Vivamus posuere felis velit, ut ultrices lectus faucibus ac. Vestibulum risus enim, malesuada ac nisl id, consequat tempus massa. Nulla suscipit mi quis velit ultricies rutrum. Donec a lorem ac nisi pharetra vehicula id eget odio. Etiam venenatis massa nec arcu mattis, non convallis purus mollis. Etiam egestas posuere metus, vel iaculis lorem pretium non.

Nullam dictum egestas dolor, ac commodo neque cursus at. Cras pretium tincidunt felis, id lobortis enim consectetur quis. Mauris volutpat mauris quis sollicitudin convallis. Duis et nibh a mi volutpat lacinia sed ut nibh. Suspendisse eleifend, nibh vitae sodales dapibus, tortor dui sollicitudin tortor, sit amet facilisis metus erat in massa. Pellentesque feugiat sapien non risus pharetra, vehicula dignissim enim tristique. Suspendisse faucibus mauris ac consectetur egestas....

CSS

body {
      background: #eee;
  }
  .FAQContainer 
  {
    width: 100%;
    float: left;
    position: relative;
    z-index: 999;
  }
  .DesktopAnnounce
  {
    width: 100%; 
    color: #27547D;
    text-align: left;  
    font-size: 16px; 
    font-weight: bold;
    padding: 5px;
    margin-left: 4px;
    text-shadow: 1px 1px #d8d8d8;
  }
  .FAQPanel 
  {
    height: 200px;
    width: 400px;
    text-align: left;
    margin-top: 5px;
    padding: 5px;
    overflow-y: auto;
	overflow-x: hidden;
  }
  .desktopPanel 
  {
    background-color: #e7e8e8;
    border-top: 1px solid #f8f8f8;
    border-left: 2px solid #f8f8f8;
    border-right: 2px solid #f8f8f8;
    border-bottom: 2px solid #f8f8f8;
    webkit-border-radius: 8px; 
    -moz-border-radius: 8px;
    border-radius: 8px;
  } 
  .faqHeader 
  {
    clear: both; 
    font-weight: bold; 
    color: #27547d; 
    border-bottom: 1px solid #3A3A3A; 
    margin-bottom: 5px; 
    padding: 0 0 2px 0;
  }
  .FAQ-list 
  {
    list-style: none;
    padding: 0;
    margin: 0px;
  }
 .faq-item 
 {
    color: #3a3a3a;
    padding: 5px;
 }
 .faq-question
 {
    font-size: 9pt;
 }
 .faq-question:hover
 {
    color: #f57e20;
    cursor: pointer;
 }
  .faq-answer 
 {
     display: none;
 }
 .faq-clone 
{
    color: #ffffff;
    font-size: 11px;
    padding: 10px;
    background: rgb(94,130,164);
    background: transparent\9;
    background: rgba(94,130,164,.9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e55e82a4,endColorstr=#e55e82a4);
    zoom: 1;
    display: none;
    position: absolute; 
    z-index: 9999;
    cursor: default;
    webkit-border-radius: 15px; 
    -moz-border-radius: 15px;
    border-radius: 15px;
    letter-spacing: .05em;
    line-height: 15px;
    overflow: hidden;
    top: 5%;
    left: 5%;
    word-wrap: break-word;
    width: 375px; 
    height: 400px;
}
.faq-clone:nth-child(n) {
    filter: none;
}
.faq-clone-content 
{
    overflow: auto;
}
.faq-clone-content div 
{
  ...

JavaScript

$(document).ready(function () {
    $('.faq-question').click(showAnswer);
    $("#tabs").tabs();

    function showAnswer() {
        var faqClone = $(".faq-clone");
        faqClone.remove();
        $("body").append("<div class=\"faq-clone\"></div>");
        faqClone = $(".faq-clone");
        var question = $(this).clone().html();
        var answer = $(this).next(".faq-answer").clone().html();

        var arr = new Array();
        arr.push("<div class=\"faq-clone-content\">");
        arr.push("  <span class=\"faq-clone-header\">" + question + "</span>")
        arr.push("  <span class=\"nav-help-close\">X</span>");
        arr.push("<div class=\"faq-clone-answer\">" + answer + "</div>");
        arr.push("</div>");
        var faqContent = arr.join("");

        faqClone.append(faqContent);
        faqClone.show();
        faqClone.draggable({
            handle: '.faq-clone-answer, .faq-clone-header',
            containment: 'document'
        }).resizable({
            alsoResize: ".faq-clone-content",
            maxHeight: 550,
            minHeight: 150,
            minWidth: 150
        }).css("position", "absolute");

        $(".faq-clone-content").css('height', faqClone.height() + 'px');    
        
        $(".nav-help-close").on("click", function () {
            faqClone.remove();
        });
    }
});