JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo">

CSS

#logo {
	width: 250px;
	height: 80px;
	background-color: green;

/*
According to Steven Bradley's article (www.vanseodesign.com/css/css-positioning/) "you can’t apply both the position property and the float property to the same element."
    
However the following example though appears to prove otherwise: Both properties actively influence the outcome; none gets ignored (as claimed by Bradley in this case).
*/
    
    float: right;
    position: relative;
}

#logo:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-color: red;
	opacity: 0;
	transition: opacity 0.4s;
}

#logo:hover:after {
	opacity: 1;
}