JSFiddle - React, Tailwind, and code Playground
HTML
<div class="la-alert-header">
<span>Alert</span>
<div class="la-alert-close-ico">
</div>
</div>
CSS
body{
background: silver;
}.la-alert-close-ico {
position: absolute;
right: 0;
top: 0;
width: 13px;
height: 13px;
opacity: 0.3;
border: 1px solid white;
}
.la-alert-close-ico:hover {
opacity: 1;
}
.la-alert-close-ico:before, .la-alert-close-ico:after {
position: absolute;
left: 5px;
content: ' ';
height: 13px;
width: 2px;
background-color: white;
}
.la-alert-close-ico:before {
transform: rotate(45deg);
}
.la-alert-close-ico:after {
transform: rotate(-45deg);
}