JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<div class="accWrap">
    <div id="accordion">
        <ul>
            <li>
                <h1>Ed Sheeran</h1>
                <div><a href="http://shopping.ticketluck.com/ResultsGeneralAtCity.php?kwds=Ed%20Sheeran&amp;ppcsrc=PPC" class="first"></a></div>
            </li>
            <li>
                <h1>Wicked</h1>
                <div><a href="http://shopping.ticketluck.com/ResultsGeneralAtCity.php?kwds=Wicked&amp;ppcsrc=PPC" class="second"></a></div>
            </li>
            <li>
                <h1>Iron Maiden</h1>
                <div><a href="//shopping.ticketluck.com/ResultsGeneralAtCity.php?kwds=Iron%20Maiden&amp;ppcsrc=PPC" class="third"></a></div>
            </li>
            <li>
                <h1>Madonna</h1>
                <div><a href="http://shopping.ticketluck.com/ResultsGeneralAtCity.php?kwds=Madonna&amp;ppcsrc=PPC" class="forth"></a></div>
            </li>
            <li>
                <h1>Kevin Hart</h1>
                <div><a href="http://shopping.ticketluck.com/ResultsGeneralAtCity.php?kwds=Kevin%20Hart&amp;ppcsrc=PPC" class="last"></a></div>
            </li>
        </ul>
    </div>
</div>
<script src="//www.jqueryscript.net/demo/jQuery-Plugin-for-Responsive-Accordion-Generator-awsAccordion/jquery.accordion.js"></script>
<script>
    jQuery("#accordion").awsAccordion({
	type:"horizontal",
	cssAttrsHor:{
		ulWidth:"responsive",
		liHeight:240,
		liWidth:40,
		responsiveMedia: '(max-width: 998px)'
	},
	openCloseHelper:{
		numeric:true
	},
	openOnebyOne:true,
	classTab:"active",
	slideOn:"click",
	autoPlay:true,
	autoPlaySpeed:300000
});
    
</script>

CSS

*{ margin:0; padding:0; box-sizing:border-box;}
body{ font-family: "Segoe UI", arial, tahoma, sans-serif;}

.accWrap{ margin:0px auto; max-width:960px; height:242px; border-radius: 4px; box-shadow: 0 1px 0 #DDD; border-color: #ccc #d9d9d9 #bababa; border-style: solid; border-width: 1px;}

#accordion{ height:240px;}

.accordion-ver > ul, .accordion-hor>ul { margin: 0 auto; padding: 0; list-style: none; }
.accordion-ver > ul > li { display: block; margin: 0; list-style: none; clear: left; position: relative; width: 100%; border-bottom: #f0f0f0 1px solid; background: #cccccc;  *margin-bottom: -4px; }
.accordion-ver > ul > li:hover { cursor: pointer; }
.accordion-ver > ul > li.last { border: 0; }
.accordion-ver > ul > li > h1 { position: absolute; display: block; float: left; margin: 0; padding: 0 0 0 10px; top: 0; left: 0; font-size: 15px; text-decoration: none; text-transform: uppercase; color: #000; }
.accordion-ver > ul > li > h1:hover { cursor: pointer; }
.accordion-ver > ul > li > div { display: none; background: #666; overflow: hidden; }
.accordion-ver:hover > ul > li:hover > div { cursor: default; }
.accordion-ver > ul > li > div > span { padding: 10px; display: block; text-align: left !important; line-height: normal; }
.accordion-ver > ul > li > span.numericTab { position: absolute; display: block; top: 0; padding: 0 10px 0 0; float: right; margin: 0; right: 0; font-size: 15px; text-decoration: none; color: #000; background: #cccccc; }
.accordion-ver > ul > li > i { position: absolute; display: block; top: 0; right: 0; padding: 0 10px 0 0; float: right; margin: 0; font-size: 18px; text-decoration: none; color: #000; }

.accordion-hor > ul > li { list-style: none; overflow: hidden; float: left; position: relative; background: #4a4a4a;  }
.accordion-hor > ul > li.active{ background:#f5f5f5; } 
.accordion-hor > ul > li.active h1{ color: #0064B0;}
.accordion-hor > ul > li.active > span.numericTab { color:#0064B0;}

.accordion-hor > ul > li:hover { cursor:...