JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<body>

  <section class="accordian-Section">
    <div class="container">
      <div class="row">

        <div class="col-md-6 offset-md-3">
          <div class="accordion-Title text-center pb-3">
            <h2> About </h2>
          </div>
        </div>
        <div class="col-md-6 offset-md-3">
          <div class="faq" id="accordion">
            <div class="card">
              <div class="accordionCardHeader" id="accordionHeading-1">
                <div class="mb-0">
                  <h5 class="accordion-Title" data-toggle="collapse" data-target="#accordionCollapse-1" data-area-expanded="true" data-aria-controls="accordionCollapse-1">
                    <span class="badge">1</span> What is Lorem Ipsum? </h5>
                </div>
              </div>
              <div id="accordionCollapse-1" class="collapse" aria-labelledby="accordionHeading-1" data-parent="#accordion">
                <div class="card-body">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                    book. </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>
  <script src='https://code.jquery.com/jquery-2.1.0.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
</body>

CSS

.accordion-Section {
       background: #fdfdfd;
       min-height: 100vh;
       padding: 10vh 0 0;
     }

     .accordion-Title {
       position: relative;
       margin-bottom: 45px;
       display: block;
       font-weight: 600;
       line-height: 1;
     }

     .accordion-Title h2::before {
       content: "";
       position: absolute;
       left: 50%;
       width: 60px;
       height: 2px;
       background: #E91E63;
       bottom: -25px;
       margin-left: -30px;
     }

     .accordion-Title p {
       padding: 0 190px;
       margin-bottom: 10px;
     }

     .faq {
       background: #FFFFFF;
       box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
       border-radius: 4px;
     }

     .faq .accordion {
       border: none;
       background: none;
       border-bottom: 1px dashed #CEE1F8;
     }

     .faq .card .accordionCardHeader {
       padding: 0px;
       border: none;
       background: none;
       -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
       -o-transition: all 0.3s ease 0s;
       transition: all 0.3s ease 0s;
     }

     .faq .card .accordionCardHeader:hover {
       background: rgba(233, 30, 99, 0.1);
       padding-left: 10px;
     }

     .faq .card .accordionCardHeader .accordion-Title {
       width: 100%;
       text-align: left;
       padding: 0px;
       padding-left: 30px;
       padding-right: 30px;
       font-weight: 400;
       font-size: 15px;
       letter-spacing: 1px;
       color: #3B566E;
       text-decoration: none !important;
       -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
       -o-transition: all 0.3s ease 0s;
       transition: all 0.3s ease 0s;
       cursor: pointer;
       padding-top: 20px;
       padding-bottom: 20px;
     }

     .faq .card .accordionCardHeader .accordion-Title .badge {
       display: inline-block;
       width: 20px;
       height: 20px;
       line-height: 14px;
       float: left;
      ...