JSFiddle - React, Tailwind, and code Playground

by aparadise

HTML

<!--<a class="lv-button-icon lv-button-down no-gutter" href="#the-campaign" data-active="">The Campaign<svg width="80" height="80" viewBox="0 0 80 80" focusable="false" aria-hidden="true" class="lv-icon lv-icon-down"><path fill-rule="evenodd" d="M46.2 48.6L17.8 20.3l-5.5 5.4 28.4 28.4 5.4 5.5.1.1.1-.1 5.3-4.5L80 26.7l-5.5-6.4-28.3 28.3z"></path></svg></a>-->


<br><br>
<div class="wrap">
  <div class="top" id="spec1">
    <a href="#spec2" class="lv-button-icon lv-button-down no-gutter">The Campaign<svg width="80" height="80" viewBox="0 0 80 80" focusable="false" aria-hidden="true" class="lv-icon lv-icon-down"><path fill-rule="evenodd" d="M46.2 48.6L17.8 20.3l-5.5 5.4 28.4 28.4 5.4 5.5.1.1.1-.1 5.3-4.5L80 26.7l-5.5-6.4-28.3 28.3z"></path></svg></a>
  </div>
  <div class="bottom" id="spec2">
    <a href="#spec1">bottom</a>
  </div>
</div>

CSS

.lv-masthead[data-load] .lv-button-down {
  animation-name: pop-in;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.25, .46, .45, .94);
  animation-duration: .5s;
  animation-delay: .8s;
}

.lv-masthead .lv-button-down[href] {
  display: block;
}

.lv-masthead .lv-button-down {
  display: none;
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 0 0 -1.875rem;
  transform: scale(0);
}

a:visited {
  text-decoration: none !important;
}

/*@media screen and (min-width: 48em)

.lv-button-icon {
    width: 4rem;
    height: 4rem;
}*/

.lv-button-icon {
  display: block;
  position: relative;
  width: 3rem;
  height: 3rem;
  white-space: nowrap;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-indent: 100%;
  overflow: hidden;
  transition: color .2s ease-in-out, background-color .2s ease-in-out;
  color: var(--text-color);
  background-color: var(--background-color);
  border: var(--text-lightcolor) 1px solid;
}

a {
  text-decoration: none;
  color: inherit;
}

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

.lv-masthead[data-load] .lv-button-down .lv-icon {
  animation: 1s linear .7s forwards down-intro;
}

.lv-masthead .lv-button-down .lv-icon {
  opacity: 0;
}

.lv-button-icon .lv-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -.5rem 0 0 -.5rem;
  fill: var(--text-color);
}

html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
  background-color: pink;
}

#section2 {
  height: 600px;
  background-color: yellow;
}

.top {
  border: 1px solid red;
  height: 700px;
}