JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Basic Test</h2>
<div class="background box">
    <div class="gradient box">
        Demo 1   
    </div>
</div>

<div class="gradient box">
    <div class="background box">
        Demo 2
    </div>
</div>


<div class="gradient background box">
    Demo3
</div>

<div class="background gradient box">
    Demo4
</div>

<div class="colored box">
    <div class="gradient box">
        Demo 5
    </div>
</div>

<div class="gradient box">
    <div class="colored box">
        Demo 6
    </div>
</div>

<div class="gradient colored box">
     Demo 7
</div>

<div class="colored gradient box">
     Demo 8
</div>

<div style="clear:both">&nbsp;</div>

<h2>Extra Test</h2>
<p>The behavior is quite strange when you do some more permutations on that.</p>
<div class="background colored gradient box">
     Demo 9
</div>

<div class="background colored box">
     Demo 10
</div>

CSS

.box {
   height:80px; width:70px; margin:10px; float:left;  
}

.background {
     background-image: url(http://n3.backgroundsarchive.net/pub/1/1832ca7azmw2o9.jpg);  
}

.gradient {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); 
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); 
        background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); 
        background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);     
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );    
        background: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);    
}

.colored {
  background-color:#bada55;   
}

h2 {
  font-size:20px;  
  margin:10px 0;
  padding-bottom:3px;
  border-bottom:2px solid #777; 
}