JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="house">
<div id="bg"></div>
    <div class="gradient">
    
        <div class="message"><header>God Loves <span>You</span></header>
    <article>Lorum Ipsum Dolor Sit Imet Lorum Ipsum Dolor Sit Imet Lorum Ipsum Dolor Sit Imet <a href="#">Lorum Ipsum</a> Dolor Sit Imet Lorum Ipsum Dolor Sit Imet Lorum Ipsum Dolor Sit Imet </article>
        </div>
    <div class="ul"><a href="#">GodLov.es</a></div>
    <div class="ur"><a href="#">Share</a></div>
    <div class="ll">By <a href="#">username</a> 2 days ago</div>
    <div class="lr"><a href="#">Report</a></div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Arvo);

body{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
    color:#fff;
    text-shadow:0 1px 2px #000;
}

#bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(http://fc00.deviantart.net/fs38/f/2008/328/1/7/178f1f0ac67010cde27e99096cb40acc.jpg) top center no-repeat;
    background-size:cover;
    
  -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
       -o-transition: all 0.5s ease; 
          transition: all 0.5s ease; 

}
#bg.blur{
    
  -webkit-filter:blur(5px);

}
.gradient{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,0.7)));
  background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.7));
  background-image:    -moz-linear-gradient(top, transparent, rgba(0,0,0,0.7));
  background-image:      -o-linear-gradient(top, transparent, rgba(0,0,0,0.7));
  background-image:         linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

}

#house a{
    font-size:12px;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
}
#house a:hover{
    border-bottom:1px dotted #fff;
    text-shadow:0 0 10px #fff;
}

.ul, .ll, .ur, .lr{
    position:fixed;
}
.ul{top:5px; left:5px;}
.ur{top:5px; right:5px;}
.ll{bottom:5px; left:5px;}
.lr{bottom:5px; right:5px;}

header{
    display:block;
    font-family: 'Arvo', serif;
    font-size:72px;
    text-align:center;
}
header span{
    text-shadow:0 0 20px white
}
article{
    width:400px;
    margin:20px auto;
    font-size:12px;
}
#house article a{
    font-weight:normal;
    border-bottom:1px dotted #fff;
}

.message{
    position: absolute;
    width: 100%;
    top: 50%;
}

JavaScript

var positionMessage = function(){
    var message = document.getElementsByClassName('message')[0],
        height = parseInt(window.getComputedStyle(message, null).getPropertyValue("height")),
        margin = (window.innerHeight-height)/2;
    message.style.marginTop = (margin*(-1))+'px';
    
    setTimeout(function(){
        document.getElementById('bg').className="blur";
    }, 1000);
}

positionMessage();