JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Ubuntu"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container hvcenter">
<!-- Container -->
<div class="row">
<!-- Bootstrap Row -->
<div class="col-lg-5">
<img src="img/Logo.png" alt="Logo" class="img-responsive">
</div>
<div class="col-lg-7">
<h1>Welcome</h1>
<p>To show you the best content for you, please chose one of the following buttons.</p>
<a href="neu/index.html" class="btn btn-block btn-info btn-lg">Are you looking for a new car?<br>Here you will find it.</a>
<a href="modern/index.html" class="btn btn-warning btn-block btn-lg">You are searching for a used vehicle<br>We can show you offers</a>
<a href="reseller/index.html" class="btn btn-block btn-success btn-lg">Your car needs a repair service?<br>Take a look!</a>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
position: relative;
}
.container {
width: 300px;
border-radius: 36;
padding: 3em;
background-color: silver;
}
.hvcenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-size: @font-size-h1*2.5;
margin-top: -0.2em;
}
p {
font-size: @font-size-base*2;
}
img {
alignment-adjust: central;
vertical-align: middle;
text-align: center;
}