JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
  <div class="nav_container">
    <div class="logo_container"><div class="brand_logo_icon"></div></div>
  </div>
</div>
<div id="container" class="container">
<div class="content">
	<div class="home_img"></div>
</div>
</div>

CSS

body	{
	background: rgb(40,40,40);
	font-family: Helvetica, Arial, sans-serif;
	font-weight: lighter;
	user-select: none;
	-moz-user-select: -moz-none;
	-webkit-user-select: none;
	margin: 0;
	cursor: default;
	color: rgb(60,60,60);
}

div	{
	box-sizing: border-box;
}

@supports(padding: max(0px)) {
	.container	{
		padding-left: max(0px, env(safe-area-inset-left));
		padding-right: max(0px, env(safe-area-inset-right));
	}
	#nav .nav_container	{
		padding-left: max(0px, env(safe-area-inset-left));
		padding-right: max(0px, env(safe-area-inset-right));
	}
}

#nav	{
	padding: 0px;
	display: block;
	background: rgb(55,155,55);
}
.brand_logo_icon		{
	display: block;
  background-color: rgb(200,30,30);
	width: 60px;
	height: 60px;
}

#nav .logo_link	{
	position: relative;
	display: block;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 45px;
}

#nav .nav_container 	{
	display: block;
	max-width: 1300px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#nav .nav_container .logo_container	{
	display: inline-block;
	padding: 0px;
	background: rgb(80,80,80);
	border-radius: 0px 0px 5px 5px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
  overflow: hidden;
}

#nav .nav_container .brand_logo_icon		{
	width: 70px;
	height: 70px;
}

.container	{
	display: block;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	transition: margin 225ms linear;
}

.container .splash:before	{
	content: "";
	display: block;
	padding-top: 56.2%;
}
.container .splash	{
	position: relative;
	display: block;
	width: 90vw;
	max-width: 1300px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
}
.container .splash .splashimg	{
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background-size: 100%;
	background-repeat: no-repeat;
	opacity: 0;
}

.container .content	{
	display: block;
	position: relative;
	left: 0;
	richness:...