JSFiddle - React, Tailwind, and code Playground
HTML
<article>
<h1>Гроб который вы давно ждали</h1>
<button>Заказать в кредит на 24 месяца</button>
</article>
CSS
@import url(https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,cyrillic);
html, body {
margin: 0;
width: 100%;
height: 100%;
}
html {
background: url('http://brinny.co.uk/Willow2.jpg') no-repeat center center;
background-size: cover;
}
body {
background: rgba(0, 0, 0, 0.3);
display: table;
}
body, button {
font: 16px/1.4 'Playfair Display', serif;
}
article {
display: table-cell;
vertical-align: middle;
text-align: center;
}
h1 {
margin-bottom: 70px;
color: #fff;
font-weight: normal;
font-size: 56px;
}
button {
padding: 10px 25px;
color: #fff;
background: #111;
border: 0 none;
border-radius: 8px;
position: relative;
}
button:hover {
box-shadow: inset 0 0 0 4px #111, inset 0 0 0 5px #fff;
}
button:active {
top: 1px;
left: 1px;
}
button:focus {
outline: 0 none;
}