JSFiddle - React, Tailwind, and code Playground

by joshuaohana

HTML

<div class="home">
  <div class="blur-row">
    <div></div>
    <p>Line of text</p>
  </div>
</div>

CSS

body {
  height: 100vh;
  width: 100vw;
}

.home {
  height: 100%;
  width: 100%;
  background-image: url('http://eskipaper.com/images/cute-cat-background-1.jpg');
  background-position: center center;
  background-size: cover;
  box-shadow: inset 0 0 10em 3em black;
}

.blur-row {
  width: 100%;
  height: 10%;
  position: absolute;
  overflow:hidden;
  top: 50%;
}

.blur-row > div {
  height: 100%;
  width: 100%;
  background-image: url('http://eskipaper.com/images/cute-cat-background-1.jpg');
  background-position: center center;
  background-size: cover;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
}

p {
  color: white;
  font-size: 3em;
  text-align: center;  
  width: 100%;
  background: transparent;
  position: absolute;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}