JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<div class="header">HEADER</div>
<div class="content">CONTENT, CONTENT, CONTENT, CONTENT, CONTENT<br />CONTENT, CONTENT, CONTENT</div>
<div class="footer">FOOTER</div>
</body>
</html>

CSS

* {
  margin: 0px;
}
body {
  background: url("http://colrd.com/misc/library/pattern/DinPattern/horton.gif");
}
.content {
  padding: 30px 20px;
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
}