JSFiddle - React, Tailwind, and code Playground

by unhw

HTML

<i class="circle">
    <a class="cross"></a>
</i>

CSS

.circle {
    box-sizing: border-box;
    padding: 28px;
	display: block;
	background-color: #4b545f;
	width: 128px;
	height: 128px;
	border-radius: 64px;
}

.cross {
    box-sizing: border-box;
   	display: block;
    background-color: #ffffff;
	width: 20px;
	height: 82px;
	position: relative;
    top: -5px;
    right: -26px;

	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

    .cross:before {
        background-color: #ffffff;
		content: "";
		width: 82px;
		height: 20px;
		position: absolute;
		top: 31px;
		right: -31px;
    }