JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-6">
                    <div class="panel-group i-accordion">
                        <div class="panel panel-success">
                            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#aboutus3">
                                <h4 class="panel-title">test<i class="fa fa-chevron-right pull-left"></i></h4>
                            </div>
                            <div id="aboutus3" class="panel-collapse collapse">
                                <div class="panel-body">
                                     <p>answer</p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-success">
                            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#whoweare3">
                                <h4 class="panel-title">testtesttesttesttesttest<i class="fa fa-chevron-right pull-left"></i></h4>
                            </div>
                            <div id="whoweare3" class="panel-collapse collapse">
                                <div class="panel-body">
                                     <p>answer</p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-success">
                            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#contactus3">
                                <h4 class="panel-title">testtesttesttesttesttesttesttesttestesttes ttesttestt<i class="fa fa-chevron-right...

CSS

.btn, .btn:hover, .btn:focus, .btn:active, .btn:active:focus { outline: 0; 
}
.btn-custom { margin-bottom: 1em; }
.no-margin { margin: 0; }
.no-padding { padding: 0; }
.no-border { border: 0; }
.no-radius { border-radius: 0; }


/*** Content ***/
main {}
.i-row { padding-top: 40px; padding-bottom: 40px; }
.i-row-odd { background-color: #ffffff; }
.i-row-even { background-color: #f7f7f7; }

.section-title { margin-top: 0; margin-bottom: 0.6em; font-weight: 500; }
.section-title .fa { margin-right: 5px; color: #6f5499; }


.i-accordion .panel-heading,
.d-accordion .panel-heading,
.accordion-2a .panel-heading,
.accordion-2b .panel-heading,
.accordion-3 .panel-heading { cursor: pointer; }
.d-accordion .panel-heading.collapsed .fa-chevron-up:before { content: '\f078'; }


.panel-success>.panel-heading {
    background-color: transparent;
    border-color: transparent;
}
.panel-success>.panel-heading .panel-title i{
  width:30px;
}
.panel-success>.panel-heading .panel-title {
    text-align:center;
    width:calc(100% - 30px);
    
}