JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<article>
    <div id="intro">
        <div class="bg_big bg_big_green glow">
            <div id="opac1">
                <h1>TITLE WITH LINE</h1>
                <p>111</p>
            </div>
        </div>
        <div class="story">
            <div class="float-left">
            </div>
        </div> <!--.story-->
    </div> <!--#intro-->
</article>

CSS

article{
    height:100vh;
    
}

#opac1 {
    text-align:center;
}
h1 {
    position:relative;
    display:inline-block;
}
h1::before, h1::after {
    content:' ';
    display:block;
    position:absolute; top:50%; left:-120px;
    width:100px;
    border-bottom:1px solid #FFF;
}
h1::after {
    left:auto; right:-120px;
}
 
#intro{
    background: url(https://dl.dropboxusercontent.com/u/64675374/bg/bg2.jpg) 50% 0 no-repeat fixed;
    /*width:100%;*/
    display: block;
    height:100%;
    background-size: cover;
    background-repeat: no-repeat;
	
}



.story{
	margin-left:10%;
	margin-top:240px;
	/*min-width: 980px;*/
	overflow: auto;
	/*width: 980px;*/
	position:absolute;
}

.bg_big h1{
    font-weight:  lighter;
    font-size: 3em;
    text-transform: uppercase;
    text-align: center;
    color:#fff;
    /*opacity:0.3;*/
}

.bg_big p{
    text-align: center;
    color:#fff;
    font-size:1.2em;
    margin-top:20px;
    /*opacity:0;*/
    
}

.story .float-left, .story .float-right{
	position: relative;
	width: 350px;	
}

.bg_big{
    height: 200px;
    position:absolute;
    width:100%;
    -webkit-transition: background-color 0.7s ease;
    -moz-transition: background-color 0.7s ease;
    -o-transition: background-color 0.7s ease;
    transition: background-color 0.7s ease;
}
.bg_big_green{
    background-color: #70c21f;
}

.bg_big_green:hover{
    background-color: #52990b;
}

.bg_big_orange{
    background-color: #ffb621;
}

.bg_big_orange:hover{
    background-color: #e69b01;
}

.bg_big_mint{
    background-color: #96dcdc;
}

.bg_big_mint:hover{
    background-color: #69c7c7;
}

.bg_big_blue{
    background-color: #0067b6;
}

.bg_big_blue:hover{
    background-color: #015190;
}


.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
 ...