JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="jumbotron desktop">
<div class="container">
<div class="container-fluid">
<div class="container content">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="logo-img" src="http://via.placeholder.com/350x150/f2f2f2?text=logo">
</div>
</div>
<div class="row button-row">
<div class="col-md-12 offset-2" id="content-buttons">
<button onclick="window.location='#';" class="btn btn-4 btn-4a">Button 1</button>
<button onclick="window.location='#';" class="btn btn-4 btn-4a">Button 2</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron{
height: 100vh;
background-image:url(http://via.placeholder.com/1920x1080?text=x);
margin:0;
position:relative;
width:100%;
border-radius: 0px;
}
.jumbotron > .container{
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
.logo-img{
width: 816px;
height: 233px;
}
.mobile {
display:none;
}
/* JUST BUTTON CSS IGNORE */
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon/icomoon.eot');
src: url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* General button style (reset) */
.btn {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 10px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: 6px;
font-weight: 500;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border-radius: 0rem !important;
}
.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* Pseudo elements for icons */
.btn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
position: relative;
-webkit-font-smoothing: antialiased;
}
.icon-envelope:before {
content: "\e000";
}
.icon-cart:before {
content: "\e007";
}
.icon-cart-2:before {
content:...