JSFiddle - React, Tailwind, and code Playground

by Elvin Asadov

HTML

<script src="http://placehold.it/140x100"></script>
<script src="http://placehold.it/116x116"></script>
<div class="subService_fragment" href="google.com">
    <div> <span class='fragment_close'>x</span>

         <h3>Sub Service Title</h3>

        <p class="text">Title: dasdas</p>
        <p class="text">Title: dasdas</p>
        <p class="text">Title: dasdas</p>
        <p class="text">Title: dasdas</p>
    </div>
</div>

CSS

.subService_fragment {
    font-size: 12px;
    font-family: tahoma;
    border: 1px solid #ccc;
    color: #555;
    display: block;
    padding: 10px;
    box-sizing: border-box;
}
.subService_fragment h3 {
    padding: 0;
    margin: 0;
    color: #369;
}
.subService_fragment span.fragment_close {
    float:right;
    display:inline-block;
    padding:5px 8px;
    background:#ccc;
    cursor:pointer;
    font-size:12px;
    font-weight:bold;
}
.subService_fragment span.fragment_close:hover {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    font-size:13px;
}

JavaScript

window.onload = function () {
    document.getElementById('close').onclick = function () {
        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
        return false;
    };
};