JSFiddle - React, Tailwind, and code Playground

HTML

<div id="quiz_container">
<ul class="quiz_container" style="padding: 0px;">


<li class="question_container row-fluid question_0">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who said it: Newt or Schrute?</h1>
<p class="text">"Men are basically little piglets...Males are biologically driven to go out and hunt giraffes."</p>
</div>
<ul class="span12 possible_answers possible_answers_0">
<li class="possible_answer span12 answer_0" id="alerts" >Dwight Schrute</li>
<li class="possible_answer span12 answer_1">Newt Gingrich</li>
</ul>
</li>
<div data-alerts="alerts"  data-ids="myid" data-fade="3000"></div>
        


<li class="question_container row-fluid question_1">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who was it?</h1>
<p class="text">He said: "Can we steer away from 'gay people'? I’m sorry, it’s an orientation, not a race. Plus, a lot of other races are intolerant of gays."</p>
</div>
<ul class="span12 possible_answers possible_answers_1">
<li class="possible_answer span12 answer_0">Must be Schrute</li>
<li class="possible_answer span12 answer_1">Totally Newt</li>
</ul>
</li>

<li class="question_container row-fluid question_2">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who said it?</h1>
<p class="text">When he was 11-years-old, he took on City Hall in an attempt to build a zoo from scratch in South Central Pennsylvania.</p>
</div>
<ul class="span12 possible_answers possible_answers_2">
<li class="possible_answer span12 answer_0">Lil' Schrute</li>
<li class="possible_answer span12 answer_1">Lil' Newt</li>
</ul>
</li>

<li class="question_container row-fluid question_3">
<div class="question span12 show" style="overflow: hidden; position: relative;">
<h1 class="title">Who was it?</h1>
<p class="text">This man pitched a radical plan to capture Osama bin Laden using a portable prison that could be...

CSS

.quiz_container {
    list-style-type: none !important;
    font-weight: bold;
    color: #21252E;
    width: 98%;
}

/*fluid grid layout using twitter bootstrap */

.row-fluid {
    margin-left: 0 !important;
}

.span12 {
    padding: .75em;
    margin-top: .75em;
    margin-left: 0 !important;
}

.span12.question {
    padding: 0;
}

/*additional custom styling*/

.quiz_container .question_container {
    margin: 1em 0em 6em;
}

.quiz_container .question_container h1, .question p, .revealed_answer p {
    line-height: 1.5em; 
}

.quiz_container .question_container h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0em 0em 1em 0em;
}

.quiz_container .question p {
    font-size: 1.5em;
    max-height: 8em;
}

.quiz_container .possible_answers.span12 {
    padding: 0;
    margin: 0;
}

.quiz_container .possible_answer {
    background: rgba(254, 231, 88, .2);
    margin-left: 0 !important;
    border-radius: 2px;
    list-style-type: none;
}

.quiz_container .possible_answer:hover {
    background: rgba(254, 231, 88, 1);
    cursor: pointer;
    color: #000;
}

.quiz_container li {
    list-style-type: none !important;
}

/*more styling for answers*/

.quiz_container .revealed_answer p {
    font-size: 1.2em;
    line-height: 1.5em;
    padding: 0em 0 0 0;
    margin: 0;
    min-height: 3em;
    font-weight: normal;

}

.quiz_container .revealed_answer a {
    color: #E64522;
    border-bottom: 0 !important;
}

.quiz_container .revealed_answer a:hover {
    opacity: .75;
    text-decoration: none;
}

.quiz_container .correct_answer {
    background: #62DA97;
    opacity: .5;
    cursor: pointer;
}

.quiz_container .wrong_answer {
    background: #FF8362;    
    opacity: .5;
    cursor: pointer;
}

.quiz_container .selected {
    opacity: 1;
    color: black;
}

.quiz_container .selected:hover, .correct_answer:hover, .wrong_answer:hover {
    opacity: 1;
}

.quiz_container .hide {display: none;}

.quiz_container .show {display: block;}

.quiz_container...

JavaScript

$("#alerts").on('click',function() {
        $(document).trigger("add-alerts", [
        {
            'message': "Wrong",
            'priority': 'warning'
        }]);
    });