JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<main>
  <div class="bar"></div>
  <span class="arrow">v</span>
</main>

SCSS

main {
  position: relative;
  .arrow {
    display: inline-block;
    transition: .2s all;
    margin-left: 1rem;
    color: white;
    font-family: Lucida Grande;
  }
  .bar {
    height: 20px;
    width: 20%;
    background: violet;
    position: absolute;
    left: 0;
    top: 0;
    transition: .2s all;
  }
  &.animate {
    .arrow {
      transform: rotate(180deg);
    }
    .bar {
      width: 100%;
    }
  }
}

JavaScript

const $main = document.querySelector('main');
const $arrow = $main.querySelector('.arrow');

setInterval(() => $main.classList.toggle('animate'), 1000)