JSFiddle - React, Tailwind, and code Playground
HTML
<br>
<br/>
<div class="subService_fragment"> <span class='fragment_close'>x</span>
<h3>Sub Service Title</h3>
<div class="fragments">
<label class="fragment_title">Название кредита</label> <span class="fragment_value">AZSDFASf4545 </span>
</div>
<div class="fragments">
<label class="fragment_title">Полное имя</label> <span class="fragment_value">AZSDFASf4545 </span>
</div>
<div class="fragments">
<label class="fragment_title">Title</label> <span class="fragment_value">AZSDFASf4545 </span>
</div>
<div class="fragments">
<label class="fragment_title">Title</label> <span class="fragment_value">AZSDFASf4545 </span>
</div>
</div>
CSS
.subService_fragment {
font-size: 12px;
font-family: tahoma;
border: 1px solid #ccc;
color: #555;
display: block;
padding: 15px;
box-sizing: border-box;
}
.subService_fragment h3 {
padding: 0;
margin: 0;
color: #369;
}
span.fragment_close {
float:right;
display:inline-block;
padding:5px 8px;
background:#ccc;
cursor:pointer;
font-size:12px;
font-weight:bold;
}
span.fragment_close:hover {
box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
font-size:13px;
}
div.fragments {
color:#5e5e5e;
font-size:14px;
margin-top:15px;
}
label.fragment_title {
width:130px;
float:left
}
span.fragment_value {
border:1px solid #c6cccc;
border-radius:3px;
padding:5px;
}
JavaScript
window.onload = function () {
document.getElementById('close').onclick = function () {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
return false;
};
};