JSFiddle - React, Tailwind, and code Playground

by rigor789

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <div class="top">
    <div class="roof">
      <span class="scrolldown" v-scroll-to="{ el: '#element', offset: -50}">
        <svg class="arrow" width="100" height="100">
          <path d="M0 0 L30 32 L60 0"></path>
        </svg>
      </span>
    </div>
    <div class="section">
      <div class="window"></div>
      <div class="window"></div>
    </div>
  </div>
  <div class="middle">
    <div class="section" v-for="section in sections">
      <div class="window" v-for="window in random(2,5)"></div>
    </div>
  </div>
  <div class="middle">
    <div class="section">
      <h1 id="element">You found me!</h1>
    </div>
  </div>
  <div class="middle">
    <div class="section" v-for="section in sections">
      <div class="window" v-for="window in random(2,5)"></div>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #4fc08d;
}

.scrolldown {
  position: absolute;
  bottom: 24vh;
  cursor: pointer;
}

.arrow {
  width: 60px;
  height: 40px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 20px;
}

.arrow path {
  stroke: #4fc08d;
  fill: transparent;
  stroke-width: 3px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}

.top {
  height: 100vh;
  background: #42b983;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.middle {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.roof {
  align-self: center;
  width: 0;
  height: 0;
  border-left: 15vw solid transparent;
  border-right: 15vw solid transparent;
  border-bottom: 15vw solid white;
  display: flex;
  justify-content: center;
}

#element {
  background: #42b983;
  color: white;
  padding: 10px;
}

.section {
  align-self: center;
  background: white;
  width: 30vw;
  height: 30vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.window {
  background: #4fc08d;
  width: 2vw;
  height: 2vw;
}

@keyframes arrow {
  0% {
    opacity: .2
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: .2
  }
}

JavaScript

new Vue({
  el: '#app',

  data: {
    sections: 20
  },

  methods: {
    random(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
  }
})