JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<div class="block utf8">
	<div class="inner"></div>
</div>
<div class="block base64">
	<div class="inner"></div>
</div>
<div class="block inline">
	<div class="inner"></div>
</div>

CSS

html{
	background:#f0f0f0;
}
.block{
	border-bottom:1px solid #64abfb;
	margin:0 0 20px;
	padding:0 0 0 40px;
}
.inner{
	height:58px;
	border-top:1px solid #64abfb;
}

.utf8{
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="m0,60 a35,35,0,0,0,35,-35 l0,-19 a6,6,0,0,1,6,-6" fill="none" stroke="rgb(100, 171, 251)"/></svg>');
}

.base64{
	background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wLDYwIGEzNSwzNSwwLDAsMCwzNSwtMzUgbDAsLTE5IGE2LDYsMCwwLDEsNiwtNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2IoMTAwLCAxNzEsIDI1MSkiLz48L3N2Zz4=');
}

.inline{
	position:relative;
	padding:0 40px;
}
.inline .inner{
	background:#fff;
}
.inline:before,
.inline:after{
	content:"";
	position:absolute;
	clip:rect(0, 40px, auto, auto);
	top:0;
	bottom:0;
	width:40px;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="m0,60a35,35,0,0,0,35,-35l0,-19a6,6,0,0,1,6,-6l5,0,0,70,-35,0z" fill="rgb(255,255,255)" stroke="rgb(100,171,251)"/></svg>');
}
.inline:before{
	left:0;
}
.inline:after{
	right:0;
	transform:rotateY(180deg);
}
.inline .inner:hover{
	background:#6fc;
}
.inline:hover:before,
.inline:hover:after{
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="m0,60a35,35,0,0,0,35,-35l0,-19a6,6,0,0,1,6,-6l5,0,0,70,-35,0z" fill="rgb(102,255,204)" stroke="rgb(100,171,251)"/></svg>');
}