JSFiddle - React, Tailwind, and code Playground

by Robert N.

HTML

<div class="col-xs-12 col-md-6" id="mainbottom1">    	
	
<div class="x_panel  ">
<div class="x_title">
	    		    <h3 class="modtitle">   Mainbottom1</h3>
	    <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link">Collaps<i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Settings 1</a>
                        </li>
                        <li><a href="#">Settings 2</a>
                        </li>
                      </ul>
                    </li>
                    <li><a class="close-link">Close<i class="fa fa-close"></i></a>
                    </li>
                  </ul>
<div class="clearfix"></div>
</div>
		
        <div class="x_content">
						
<p>Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации системы обучения кадров, соответствует насущным потребностям.</p>
<p>Идейные соображения высшего порядка, а также постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание соответствующий условий активизации.</p>
	    </div>
	</div>
    </div>

CSS

.x_panel {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #e6e9ed;
  display: inline-block;
  margin-bottom: 10px;
  opacity: 1;
  padding: 10px 17px;
  position: relative;
  transition: all 0.2s ease 0s;
  width: 100%;
}
.x_title {
  border-bottom: 2px solid #e6e9ed;
  margin-bottom: 10px;
  padding: 1px 5px 6px;
}
.panel_toolbox {
  float: right;
  min-width: 70px;
}
.panel_toolbox > li {
  cursor: pointer;
  float: left;
}
.panel_toolbox > li > a {
    color: #c5c7cb;
    font-size: 14px;
    padding: 5px;
}
.panel_toolbox > li > a:hover {
    background: #f5f7fa none repeat scroll 0 0 !important;
}
.navbar-right {
  margin-right: 0;
}
.x_content {
  clear: both;
  float: left;
  margin-top: 5px;
  padding: 0 5px 6px;
  position: relative;
  width: 100%;
}
.clearfix::after, form::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

JavaScript

$(document).on('click','.close-link',(function () {
   $(this).closest('div.x_panel').remove();
}));
$(document).on('click','.collapse-link',(function () {
   $(this).closest('div.x_panel').find('div.x_content').slideToggle(200);
}));