JSFiddle - React, Tailwind, and code Playground

by Kirti Vishwakarma

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel-group vertical-panel-group none" id="accordion1">
  <div class="panel panel-default">
    <div class="panel-heading hPanelHeading" data-toggle="collapse" data-parent="accordion1" href="#Engines">
      <h4 class="panel-title"><a></a></h4>
    </div>
    <div id="Engines" class="panel-collapse  in">
      <div class="panel-body">

      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading hPanelHeading" data-toggle="collapse" data-parent="accordion1" href="#ACESEngines">
      <h4 class="panel-title"><a></a></h4>
    </div>
    <div id="ACESEngines" class="panel-collapse  in">
      <div class="panel-body">

      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading hPanelHeading" data-toggle="collapse" data-parent="accordion1" href="#NAPAEngines">
      <h4 class="panel-title"><a></a></h4>
    </div>
    <div id="" class="panel-collapse  in">
      <div class="panel-body">

      </div>
    </div>
  </div>
</div>

CSS

.panel-heading {
   background-color: red;
 }
 
 .panel {
   width: 390px;
   z-index: 100;
   -webkit-backface-visibility: hidden;
   -webkit-transform: translateX(-100%) rotate(-90deg);
   -webkit-transform-origin: right top;
   -moz-transform: translateX(-100%) rotate(-90deg);
   -moz-transform-origin: right top;
   -o-transform: translateX(-100%) rotate(-90deg);
   -o-transform-origin: right top;
   transform: translateX(-100%) rotate(-90deg);
   transform-origin: right top;
   float: left;
   margin: 10px;
 }
 
 .panel-heading {
   width: 375px;
   padding: 0px!important;
 }
 
 .vertical-panel-group {
   height: 420px;
 }
 
 .panel-title {
   height: 18px;
   padding: 3px 10px 0px 0px;
 }
 
 .panel-title a {
   float: right;
   text-decoration: none;
   padding: 10px 430px;
   margin: -10px -430px;
 }
 
 .panel-body {
   height: 380px;
 }
 
 .panel-group .collapsible {
   -webkit-backface-visibility: hidden;
   -webkit-transform: translateX(0%) rotate(90deg);
   -webkit-transform-origin: left top;
   -moz-transform: translateX(0%) rotate(90deg);
   -moz-transform-origin: left top;
   -o-transform: translateX(0%) rotate(90deg);
   -o-transform-origin: left top;
   transform: translateX(0%) rotate(90deg);
   transform-origin: left top;
   border-radius: 0px;
   box-shadow: 0px;
 }
 
 .panel-group .panel .three-grids {
   margin-left: 370px!important;
   position: absolute;
   padding: 0px;
   margin-top: -15px!important;
   border: none;
   width: 95%;
 }