JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div id="accordionWrap">
	<h1>Remind yourself of the room types</h1>
	<div id="accordion">
		<h3><a href="#">Track Facing Deluxe</a></h3>
		<div>
			<p>Find yourself mesmerised by the stunning floor to ceiling views of the Mercedes-Benz race track</p>
		</div>
		<h3><a href="#">Executive and Family</a></h3>
		<div>
            <p>You can unwind as soon as you walk through the door of a spacious Executive room. Averaging 48 square metres in space and featuring a stylish sofa, to which many can be transformed into beds for extra flexibility. Plug in and listen to your own music with the iPod<sup>&trade;</sup> docking station or sit back and watch a movie with the in room entertainment. </p>
		</div>
		<h3><a href="#">Track Facing Executive</a></h3>
		<div>
			<p>For that added luxury during your stay, why not upgrade to one of the track facing Executive guest rooms? The track facing Executive rooms all feature small tables with four dining chairs and viewing balconies, so you can relax in style. Why not order breakfast to your room and enjoy while watching the mesmerising Mercedes-Benz race track.</p>
		</div>
		<h3><a href="#">Panoramic Suite</a></h3>
		<div>
            <p>The stunning Suites with panoramic views, averaging 75 square metres, are a real talking point and deliver a unique and stylish experience. With a hallway separating the bedroom and the lounge area, this particular Suite type not only provides luxury but great flexibility. The lounge area comes complete with a sofa, table and four chairs; perfect to relaxing, dining or holding a small, private meeting.</p>
        </div>
        <h3><a href="#">Super Suite</a></h3>
		<div>
            <p>Escape in one of eight super Suites, each consisting of one or two bedrooms and a large sitting room. The average size of this combination covers; 100 square metres and features an executive desk, intimate dining table, corner sofa and two large wardrobes. Two Suites even feature a u-shaped sofa with a 50”...

CSS

#accordionWrap {  
    width: 430px;  
    margin: 0 auto;  
    background: #106470;
    padding:20px;
}  

#accordionWrap h1 {
    margin:0;
    padding:0 0 20px 0;    
    font-size:1em;
    width:100%;
    text-transform:uppercase;
    text-align: center;
    color:#fff;
}

#accordion .ui-accordion-content {  
    background: #f3f3f3;  
    color: #777;  
    font-size: 10pt;  
    line-height: 16pt;  
}  

#accordion .ui-accordion-content > * {  
    margin: 0;  
    padding: 20px;  
} 

#accordion .ui-accordion-content a {  
    color: #777;  
}  

#accordion .ui-accordion-header {  
    background: #ccc;
    margin: 10px 0 0 0;  
}  

#accordion .ui-accordion-header:hover {  
    background: #ddd;
    margin: 10px 0 0 0;  
}  

#accordion .ui-accordion-header a {  
    color: #000;  
    display: block;  
    font-size: 1em; 
    text-align:center;
    text-transform:uppercase;
} 

#accordion .ui-icon { 
    display: none; 
}

/* with #accordion it doesn't work*/
.ui-accordion .ui-accordion-icons {
    padding-left:0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-left, .ui-corner-top, .ui-corner-br {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }

JavaScript

$(function() {
    $("#accordion").accordion({ autoHeight: false});
    $("#accordion").accordion({ collapsible: true, active:false });
});