JSFiddle - React, Tailwind, and code Playground

by philippkuehn

HTML

<div class="search-close">
    <div></div>
    <div></div>
</div>

CSS

* {
	margin: 0px;
	padding: 0px;
	border: none;
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	box-sizing : border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust: none;
	-webkit-touch-callout: none;
	outline: none;
	}

.search-close {
    position:relative;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 3px solid #333332;
}


.search-close > div {
    position: absolute;
    background-color: #333332;
     width: 3px;
}

.search-close > div:first-child {
    top: 70%;
    left: 100%;
    height: 100%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.search-close:hover > div:last-child {
    bottom: -10%;
    right: 45%;
    height: 120%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.search-close:hover > div:first-child {
    top: -10%;
    left: 45%;
    height: 120%;
}