JSFiddle - React, Tailwind, and code Playground

by Solomon Mokua

HTML

<body>
<video autoplay muted loop poster="pizza.png"class="bgVideo">
	<source src="http://www.vidsplay.com/vids/pizza.mp4" type="video/mp4" />
</video>
<div class="topContent">
	<h2>Tumau tamu Pizza ...</h2>
	<h4>Best value for your money? Only Tamu tamu!</h4>
	<button>Make an order</button>
</div>
</body>

CSS

body{
	margin: 0;
	padding: 0;
	background-size: cover;
}
.bgVideo{
	position: fixed;
	top: 0;
	left: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1000;

}
.topContent{
	width:100%;
	height:100vh;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
}
h2{
	margin: 0;
	font-family: 'Lobster', cursive;
	font-weight: 90;
	font-size: 5em;
	text-align: center;
}
h4{
	text-align: center;
	font-family: sans-serif;
}
button{
	padding: 24px;
	font-size: 1em;
	color: #fff;
	width: 200px;
	background: #F88B3D;
	border: 1px solid #F88B3D;
	display:block;
	margin: 100px auto 10px auto;
	cursor: pointer;
}

JavaScript

/*
This javascript is not included in the original post on blog.
It simply includes the google fonnt Lobster.
*/
WebFontConfig = {
    google: { families: [ 'Lobster::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();