JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="hometotal">


<div class="homerightdiv">

<span class="homespacetitle">
Sodhi<br/>
Since 1969
</span>

<span class="homespacetext">
The Suit<br/>
The shirt<br/>
About<br/>
</span>

</div>


<div style="background: url(http://www.work.booclin.ovh/wp-content/uploads/2017/04/Unknown-7.jpeg) no-repeat center center;" class="homeleftdiv">
</div>
</div>

CSS

html,body                   { height: 100%; margin: 0px; padding: 0px; }
.hometotal                  { box-sizing:border-box; height: 100% }



.homeleftdiv                { width:55%; min-height:100%; float:left; position: fixed; top:0;  left:0; right:0; bottom:0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.homerightdiv               { width:45%; min-height:100%; float: right; background:#fff; }

.homespacetitle             { margin:200px 50px 50px 50px; display:block; text-align: left; }
.homespacetext              { margin:0px 50px 50px 50px; display:block; text-align: left; }








@media screen and (max-width:768px) {

.homerightdiv               {  width: 100%; text-align: left; color:#000; background: #fff; }
.homespacetitle             { text-align: left;  margin-top:100px;}
.homespacetext              { text-align: left; }

.homeleftdiv                { width:100%; min-height:100%; float:none; position: fixed; top:0;  left:0; right:0; bottom:0; opacity:0.05; background-color:#fff; }

}