JSFiddle - React, Tailwind, and code Playground

HTML

<div id="alpha_wrapper">
  <div id="alpha_2">
  </div>
  <div id="text_holder_2">
      THIS IS MY TEXT
    </div>
</div>

CSS

#alpha_wrapper {
  width: 540px;
  height: 360px;
  float: left;
  position: relative;
  color: #fff;
}

  #alpha_2 {
    background: transparent url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) no-repeat 0 0;
    width: 540px;
    height: 440px;
    float: left;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
  }

  #text_holder_2 {
    color: red;
    font-weight: bold;
    font-size: 28pt;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 500px;
    
    filter: none !important;      // not working 
    -moz-opacity: 1 !important;   // not working
    -khtml-opacity: 1 !important; // not working
    opacity: 1 !important;        // not working
  }