JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html> <!-- This is just my basic HTML5 template. Make sure you set this up correctly for your personal needs -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 300px;
height: 100px;
}
#wrapper {
width: 300px;
height: auto;
}
#backgroundText {
position: absolute;
top: 0;
left: 0;
z-index: -10; /* Set element containing example text behind the example elements */
}
#exampleElement1 {
background-color: red;
opacity: 1; /* Full visibility */
}
#exampleElement2 {
background-color: red;
opacity: 0.75; /* Three quarters of full visibility */
}
#exampleElement3 {
background-color: red;
opacity: 0.5; /* Half of full visibility */
}
#exampleElement4 {
background-color: red;
opacity: 0.25; /* One quarter of full visibility */
}
/* Use "opacity" and a value between 0 and 1 (decimal places are fine) to set transparency of things. More info here: https://developer.mozilla.org/en/CSS/opacity */
</style>
</head>
<body>
<div id="wrapper">
<div id="backgroundText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices ante ut ipsum condimentum porta. Suspendisse sed elit velit, et hendrerit elit. Donec elementum, risus eget...