JSFiddle - React, Tailwind, and code Playground

HTML

<div class="con"><!--
   --><div onclick='alert("open")' class="header">HEADER</div><!--
   --><div onclick='alert("close")' class="close">&times;</div><!--
 --></div>

CSS

.con {
  width: 40%;
  color: black;
  border: 1px solid black;
  transition: ease all 0.2s;
}

.con:hover {
  border: 1px solid limegreen;
}

.header, .close {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.header {
  width: 90%;
  color: black;
  font-size: 14px;
  text-transform: uppercase;
  font-family: 'Open Sans';
}

.close {
  width: 10%;
  color: black;
  font-size: 18px;
  font-family: 'Open Sans';
}

.close:hover {
  color: red;
}