JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="nav-bg">
  <div class="blob-container">
    <div class="blob"></div>
    <div class="baseline"></div>
  </div>
  <nav>
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
    <a href="#">Page 3</a>
    <a href="#">Page 4</a>
    <a href="#">Page 5</a>
  </nav>
</div>
<div class="heading">
  heading
</div>

CSS

.nav-bg {
  position: relative;
}

nav {
  display: flex;
  position: relative;

  a:link, a:visited {
    color: #222;
    padding: 2.5rem;
    text-decoration: none;
    border-right: 1px solid #eee;
  }
}

.blob-container {
  filter: blur(5px) contrast(20);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  overflow: hidden;
}

.blob {
  width: 100px;
  height: 100px;
  background: purple;
  border-radius: 50%;
  filter: blur(10px);
  animation: hover 6s infinite linear;
  position: absolute;
  top: 50%;
}

.baseline {
  width: 100%;
  height: 100px;
  background: purple;
  border-radius: 50%;
  filter: blur(10px);
  animation: hover 6s infinite linear;
  position: absolute;
  top: 80%;
}

.heading {
  background: purple;
  color: #fff;
  padding: 3rem;
  font-size: 2rem;
}