<div class="container">
  <div class="row">
    <div class="col-lg-9 mx-auto">
      <!-- Accordion -->
      <div id="accordionExample" class="accordion shadow">
        <h2 class="mt-4 mb-4 text-white text-center">Awesome Accordion By RvDesignStudio</h2>

        <!-- Accordion item 1 -->
        <div class="card">
          <div id="headingOne" class="card-header shadow-sm">
            <h6 class="mb-0 font-weight-bold">
              <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="d-block position-relative text-light text-uppercase collapsible-link py-2">
                <div class="img-left">
	                <img class="rounded-circle" src="https://image.flaticon.com/icons/svg/219/219979.svg">
	            </div>
	            <div class="media-body">
	                <h4>Camila Terry</h4>
	                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
	            </div>
	          </a>
            </h6>
          </div>
          <div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show">
            <div class="card-body p-5">
              <p class="font-weight-light text-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
            </div>
          </div>
        </div>

        <!-- Accordion item 2 -->
        <div class="card">
          <div id="headingTwo" class="card-header shadow-sm border-0">
            <h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="d-block position-relative collapsed text-light text-uppercase collapsible-link py-2"><div class="img-left">
	                <img class="rounded-circle" src="https://image.flaticon.com/icons/svg/219/219983.svg">
	            </div>
	            <div class="media-body">
	                <h4>Camila Terry</h4>
	                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
	            </div></a></h6>
          </div>
          <div id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample" class="collapse">
            <div class="card-body p-5">
              <p class="font-weight-light text-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
            </div>
          </div>
        </div>

        <!-- Accordion item 3 -->
        <div class="card">
          <div id="headingThree" class="card-header shadow-sm border-0">
            <h6 class="mb-0 font-weight-bold"><a href="#" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="d-block position-relative collapsed text-light text-uppercase collapsible-link py-2"><div class="img-left">
	                <img class="rounded-circle" src="https://image.flaticon.com/icons/svg/219/219989.svg">
	            </div>
	            <div class="media-body">
	                <h4>Camila Terry</h4>
	                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
	            </div></a></h6>
          </div>
          <div id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample" class="collapse">
            <div class="card-body p-5">
              <p class="font-weight-light text-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
body {
background: rgb(102,1,34);
background: linear-gradient(90deg, rgba(102,1,34,1) 21%, rgba(172,0,57,1) 100%);
  min-height: 100vh;
}
.container{
  padding: 60px 0px;
}
.collapsible-link::before {
  content: '';
  width: 14px;
  height: 2px;
  background: #fff;
  position: absolute;
  top: calc(50% - 1px);
  right: 1rem;
  display: block;
  transition: all 0.3s;
}
.collapsible-link::after {
  content: '';
  width: 2px;
  height: 14px;
  background: #fff;
  position: absolute;
  top: calc(50% - 7px);
  right: calc(1rem + 6px);
  display: block;
  transition: all 0.3s;
}
.collapsible-link[aria-expanded='true']::after {
  transform: rotate(90deg) translateX(-1px);
}
.collapsible-link[aria-expanded='true']::before {
  transform: rotate(180deg);
}
#accordionExample{
      background: #780128;
    border-radius: 6px;
    box-shadow: 0px 0px 0px 8px rgba(255,255,255,0.2);
  padding: 20px;
}
.card{
  background: #780128;
}
.card-header {
    background: #96002f;
    border-top: 1px solid #AB0039;
}
.card a{
  text-decoration: none;
}
.img-left{
  float: left;
  margin-right: 20px;
}
.img-left img{
  width: 60px;
}
.media-body{
  max-width: 90%;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}
.media-body h4{
  color: #660122;
  font-weight: bold;
  text-shadow: 3px 3px 10px #AC0039
}
.text-gray{
  color: #d6d4d4;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js