JSFiddle - React, Tailwind, and code Playground

HTML

<style>.faquestion {
    cursor: pointer;
    color: #fff;
    border-left: 12px solid rgb(3,59,76);
    border: 2px solid #fff9e6;
    background-color:rgb(3,59,76);
    border-radius: 4px;
    padding: 10px 10px 10px 15px;
    vertical-align: bottom;
}
.faquestion:hover{
			color:#000;
		    border:2px solid rgb(0,87,152);		
		    background-color:#DDCBA4;
		}
.faquestion::before{
	content:" \ff0b ";
	padding-right:8px;
	font-weight:bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function toggler(divId) {
    $("#" + divId).toggle();
}
</script>
<p>


Here is my sample HTML :)
</p>
<p class="faquestion" onclick="toggler('answer1');"><strong>How do I go to there?</strong></p>
<p class="" id="answer1" style="padding-left: 30px; display: none;">Follow the yellow brick road.</p>

<p class="faquestion" onclick="toggler('answer2');"><strong>What is a virtual experience?</strong></p>
<p class="" id="answer2" style="padding-left: 30px; display: none;">The Virtual experiences is...</p>