JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<h2>Natural stack order</h2>
<div class="box sample3-1">
	<div class="child"></div>
</div>
<div class="box sample3-2">
	<div class="child"></div>
</div>

<h2>Natural stack order and image involves</h2>

<div class="box sample1">
		<img src="http://fillmurray.com/100/100" alt="">
</div>
<div class="box sample1-2">opacity: 1</div>


<div class="box sample1-3">
	<img src="http://fillmurray.com/100/100" alt="">
</div>
<div class="box sample1-4">opacity: .9</div>

SCSS

.box {
	width: 100px;
	height: 100px;
}
.child {
	width: 80px;
	height: 80px;
}

.sample3-1 {
	background-color: SpringGreen ;
	width: 300px;
	
	.child {
		background-color: PaleVioletRed ;
	}
}
.sample3-2 {
	background-color: PapayaWhip;
	opacity: .9;
	width: 300px;
	margin-top: -50px;
	
	.child {
		background-color: MediumOrchid ;
	}
}


.sample1 {
	background-color: yellow;
	width: 300px !important;
}
.sample1-2 {
	background-color: red;
	margin-top: -40px;
	
	.child {
		// background-color: green;
	}
}

.sample1-3 {
	width: 300px;
	background-color: green;
}
.sample1-4 {
	opacity: .9; //this changes stack order
	background-color: red;
	margin-top: -40px;
}