JSFiddle - React, Tailwind, and code Playground

by tobyworth

HTML

<div class="bg"></div>
<div class="container">
    <div class="search">
      <span>Search</span>
        <br/>
      <input class="txt" type="text" />
    </div>
</div>
<img class="loader" src="http://www.orhei-md.info/space.jpg" alt="" />

CSS

*{
    color:#fff;
}
body{
   background:#000;  
}
.bg{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:#000 url(http://www.orhei-md.info/space.jpg) no-repeat right top;
}
.container {
    position:absolute;
    width:100%;
    height:100%;
    overflow:auto;
    background-color: #000;
    -webkit-transition: background-color 1.5s ease 0;
    -moz-transition: background-color 1.5s ease 0;
    -o-transition: background-color 1.5s ease 0;
    transition: background-color 1.5s ease 0;
}
.transparent-bg {
    background-color: transparent;
}

img.loader{
 display:none;
}

.search{
    width:200px;
    height:100px;
    margin-left: 100px;
    margin-top: 200px;
}

JavaScript

$(function() {
    $('.loader').ready(function() {
        $('.container').addClass('transparent-bg');
    });
 });