JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<div id="header" class="collapsible">
Header
</div>
Some content goes in here. Hello.
</div>
CSS
.glow {
-webkit-box-shadow: 0 0 5px rgba(255,255,255,1);
-moz-box-shadow: 0 0 5px rgba(255,255,255,1);
}
#content {
border: 2px solid #003B62;
}
#header {
font-size: 24px;
font-weight: bold;
background-color: #003B62;
color: white;
padding: 3px;
margin: 0;
}
.collapsible {
background-image: url('http://findicons.com/files/icons/1688/web_blog/48/arrow_mini_up.png');
background-repeat: no-repeat;
background-position: right;
}
JavaScript
$(function() {
$('#header').hover(function() {
$(this).addClass('glow');
}, function() {
$(this).removeClass('glow');
});
});