JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<span>&lt;</span>

<div>

</div>

CSS

body {
	background: white;
}

span {
	background: #F22;
	border-radius: 20px 0 0 20px;
	color: #FFF;
	display: inline-block;
	padding: 5px 8px;
	position: relative;
}

span:before {
	border-color: transparent transparent transparent blue;
	border-radius: 100%;
	border-style: solid;
	border-width: 2px 20px;
	box-sizing: border-box;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 30px;
}

div {
	border-color: purple transparent purple purple;
	border-radius: 100%;
	border-style: solid;
	border-width: 1px 10px 1px 10px;
	height: 20px;
	width: 20px;
}