JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div style="--border: 5px"></div>

SCSS

* {
	box-sizing: border-box;
	margin: 0;
}

body {
	height: 100vh;
	display: grid;
	align-content: center;
	width: 100%;
}

div {
	width: 200px;
	height: 200px;
	border: var(--border) solid #000;
	position: relative;
	
	&::before {
		dispaly: block;
		position: absolute;
		top: -20px;
		right: -20px;
		width: 40px;
		height: 40px;
		background: black;
		line-height: 40px;
		text-align: center;
		color: #fff;
		content: attr(var(--border));
	}	
}