JSFiddle - React, Tailwind, and code Playground

by Susan Delgado

HTML

<ul>
    <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#accordiontwoA" aria-expanded="false" aria-controls="accordiontwoA" class="collapsed"><span>
        hello</span></a>
        <svg version="1.1" id="Collected_Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 140 140" style="enable-background:new 0 0 140 140;" xml:space="preserve" width="30" height="30">
            <circle class="st0" cx="70" cy="70" r="64.5"></circle>
            <g>
                <rect x="61.7" y="34.4" class="st1" width="16.5" height="71.2"></rect>
                <rect x="34.4" y="61.7" class="st1" width="71.2" height="16.5"></rect>
            </g>
        </svg>
    
    </li>
    <li>hello</li>
    <li>hello</li>
</ul>

<div class="panel-heading" role="tab">
				        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#accordiontwoA" aria-expanded="false" aria-controls="accordiontwoA" class="collapsed">

							<svg version="1.1" id="Collected_Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 140 140" style="enable-background:new 0 0 140 140;" xml:space="preserve" width="30" height="30">

							<circle class="st0" cx="70" cy="70" r="64.5"></circle>
							<g>
								<rect x="61.7" y="34.4" class="st1" width="16.5" height="71.2"></rect>
								<rect x="34.4" y="61.7" class="st1" width="71.2" height="16.5"></rect> 
							</g>
							</svg>
				        </a>
				    </div>

CSS

.panel-heading.active,.panel-heading:hover {
    background-color: #c2cc96 !important;
}