JSFiddle - React, Tailwind, and code Playground

IPJ Details UI

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

        
        <div class="panel-group" id="accordionOne" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionOne" href="#collapseOne">Short summary</h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam
                porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.
              </div>
            </div>
          </div>
        </div>
      
        <div class="panel-group" id="accordionTwo" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionTwo" href="#collapseTwo">Long summary</h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,...

CSS

.panel-group {
  margin-bottom: 0px;
}

.panel-group .panel {
  border: 1px solid #ddd;
  border-radius: 0;
  -wbkit-box-shadow: none;
  box-shadow: none;
}

.panel-group .panel-heading {
  padding: 0;
  border-radius: 0;
  border: 0;
  color: #337ab7;
}

.panel-group h4 {
  font-weight: normal;
  padding: 10px 44px 10px 15px;
  position: relative;
  color: #FFF;
  background: #CC4A44;
}

.panel-group h4:after {
  content: "\f106";
  position: absolute;
  top: 0;
  right: 15px;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 22px;
  line-height: 37px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #FFF;
}

.panel-group h4.collapsed {
  color: #CC4A44;
  background: transparent;
}

.panel-group h4.collapsed:after {
  content: "\f107";
  color: #CC4A44;
}