JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<div id="wrap">
  <h1>Wave</h1>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none" id="bg">


    <path d="M0,0 v50 q10,10 20,0 t20,0 t20,0 t20,0 t20,0 v-50 Z" fill="#3eba90"></path>
  </svg>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>



</div>

CSS

html,
body,
#wrap {
  height: 90%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#bg {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

h1 {
  font-size: 3em;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  /* width: 100%; */
  position: absolute;
  margin: 100px auto;
  text-align: center;
  transition: all 1000ms ease;
}

h1:after {
  /* display: block; */
  content: '';
  position: absolute;
  width: 5%;
}

h1:hover {
  /* display:block; */
  border-bottom: .1em dashed dodgerblue;
  /* transform: translateY(50%); */
  color: dodgerblue;
}

.bubble {
  display: inline-block;
  background-color: skyblue;
  margin-right: 1em;
  width: 2.3em;
  height: 2.3em;
  position: relative;
  transition: all 500ms ease;
  border-radius: 50%;
}

.bubble:hover {
  transform: translateY(50%);
}

JavaScript

/* Svg wave header
 */