<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div id="app"></div>

$menu-item-focus-size: 4px;
$menu-item-focus-transition-duration: 0.25s;

.menuItemFocus {
	background-color: #1da1f2;
	position: absolute;
	z-index: 10;
}

.menuItemFocus--withTransition {
	&.menuItemFocus--vertical {
		transition: width $menu-item-focus-transition-duration ease;
	}

	&.menuItemFocus--horizontal {
		transition: height $menu-item-focus-transition-duration ease;
	}
}

.menuItemFocus--vertical {
	top: 0;
	bottom: 0;
	left: 0;
	width: 0px;

	&.menuItemFocus--active, .menuItemFocusParent:hover &, .menuItemFocusParent:focus & {
		width: $menu-item-focus-size;
	}
}

.menuItemFocus--horizontal {
	right: 0;
	bottom: 0;
	left: 0;
	height: 0px;

	&.menuItemFocus--active, .menuItemFocusParent:hover &, .menuItemFocusParent:focus & {
		height: $menu-item-focus-size;
	}
}

.menuItemFocusParent {
	position: relative;
}

button {
	min-width: 300px;
	height: 40px;
}

function MenuItemFocus({
	className,
	orientation,
	withTransition,
	forceActive
}) {
	return (
		<div
			aria-hidden
			className={getActiveClasses([
				'menuItemFocus',
				className,
				{
					'menuItemFocus--vertical':orientation === 'vertical',
					'menuItemFocus--horizontal':orientation === 'horizontal',
					'menuItemFocus--active': forceActive,
					'menuItemFocus--withTransition': withTransition,
				},
			])}
		></div>
	);
}

function App() {
	return (
		<div>
			<button class="menuItemFocusParent">
				Horizontal focus
				<MenuItemFocus orientation="horizontal" />
			</button>
			<button class="menuItemFocusParent">
				with transition
				<MenuItemFocus orientation="horizontal" withTransition />
			</button>
			<div>
				<button class="menuItemFocusParent">
					Vertical focus
					<MenuItemFocus orientation="vertical" />
				</button>
				<button class="menuItemFocusParent">
					with transition
					<MenuItemFocus orientation="vertical" withTransition />
				</button>
			</div>
			<div>
				<button class="menuItemFocusParent">
					Forced vertical active
					<MenuItemFocus orientation="vertical" forceActive />
				</button>
				<button class="menuItemFocusParent">
					Forced horziontal active
					<MenuItemFocus orientation="horizontal" forceActive />
				</button>
			</div>
		</div>
	);
}

ReactDOM.render(<App />, document.querySelector("#app"));

function getActiveClasses() {
    var classes = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        classes[_i] = arguments[_i];
    }
    return [].concat.apply([], classes).reduce(function (result, option) {
        var nextClasses = typeof option === "object" ? joinClasses(option) : option;
        return "" + result + (result ? " " : "") + nextClasses;
    }, "");
}

function joinClasses(classes) {
    return Object.keys(classes)
        .filter(function (key) { return classes[key]; })
        .join(" ");
}