JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div id="account-topics" class="docBox  ">

		<div class="docSection">
			
<h2>Your interests</h2>

		</div>
	
		<div class="docSection ">
			
<div id="account-topics-subscribed" class="clearfix">
<p id="account-topics-add-more">Add interests so we can recommend the best Meetups for you.</p>
<ul id="account-topics-subscribed-list" class="account-topics-list clearfix">

<li class="account-topics-item" data-topicid="235">
<div class="account-topics-name">Coffee</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="10581">
<div class="account-topics-name">Social</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="206">
<div class="account-topics-name">Digital Photography</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="242">
<div class="account-topics-name">Fitness</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="6866">
<div class="account-topics-name">Progressive Muslim</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="4422">
<div class="account-topics-name">Social Networking</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="498">
<div class="account-topics-name">Singles</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="15478">
<div class="account-topics-name">Holistic Health</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="17865">
<div class="account-topics-name">girls and guys having fun</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="10290">
<div class="account-topics-name">Spirituality</div>
<a class="account-topics-remove"></a>
</li>

<li class="account-topics-item" data-topicid="3336">
<div class="account-topics-name">Self-Improvement</div>
<a...

CSS

body, html {
color: #545454;
color: rgba(0,0,0,.67);
font-size: 16px;
line-height: 1.4;
font-family: Whitney,helvetica,arial,sans-serif;
font-weight: 400;
margin: 0;
padding: 0;
}
div {
display: block;
}

.doc-box>.doc-content:first-child, .doc-box>.docSection:first-child, .docBox>.doc-content:first-child, .docBox>.docSection:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}


.docSection:first-child {
border-top: none;
}

#account-topics-subscribed {
margin-bottom: 20px;
width: 780px;
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

article, aside, blockquote, dd, details, dl, fieldset, figcaption, figure, footer, form, header, hgroup, legend, nav, ol, p, section, table, ul {
margin: 0 0 18px;
padding: 0;
}

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.account-topics-item {
float: left;
position: relative;
background: #f2f2f2;
padding: 4px 8px;
margin: 0 6px 6px 0;
width: 236px;
overflow: hidden;
}

li {
display: list-item;
text-align: -webkit-match-parent;
}

.account-topics-list {
margin: 0;
padding: 0;
list-style: none;
}

ol, ul {
list-style-position: outside;
padding-left: 1.33em;
}

.account-topics-name {
font-size: 13px;
width: 208px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

li {
display: list-item;
text-align: -webkit-match-parent;
}

.account-topics-remove {
position: absolute;
right: 6px;
top: 6px;
width: 12px;
height: 12px;
background: url(http://static2.meetupstatic.com/img/52365552690407308063732/sprites/sprite_xfeedback.png) 0 0 no-repeat;
display:...

JavaScript

$(function(){
    $('.account-topics-item').hover(
        function(){
            $(this).find('.account-topics-remove').show();
        },
        function(){
            $(this).find('.account-topics-remove').hide();
        }
    );
});