JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<style>

	</style>
</head>

<body>
	<div class="container">
		<header>
			<img src="https://i.imgur.com/TgWe6uB.png" alt="LOGO">
		</header>

		<nav>


		</nav>

		<main>
			<h1>let's meat</h1>
			<p>We love sharing good food with great people. We bring over 30 years industry experience and passion to Adare. With a dishes that are carefully designed to bring you a truly satisfying Irish food experience that you are sure to remember. 
			</p>
			<a href="#">MAKE RESERVATION</a>
			<p>Text</p>
		</main>

		<footer>

		</footer>
	</div>

</body>

</html>

CSS

html {
  /* height: 100% */
}

header {
    /* background-color: grey; */
    height: 118px;
    text-align: center;
}

nav {
    background-color: red;
    height: 40px;
}

main {
    background-color: blueviolet;
    height: 400px;
    text-align: center;
    padding-top: 80px;
    padding-left: 240px;
    padding-right: 240px;
}

footer {
    background-color: green;
    height: 100px;
}

.container {
    width: 1024px;
    margin: 0 auto;
}

body {
    background-color: #2f2f35;
    background-image: url(https://i.imgur.com/fkf4nq5.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

h1 {
    font-size: 84px;
    color: white;
    font-family: 'Microsoft YaHei', sans-serif;
}

p {
    font-size: 16px;
    color: white;
    font-family: 'Microsoft YaHei', sans-serif;
}

a {
    color: white;

}