JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="list">
    <div class="arrow">lalala</div>
    <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Maiores, nostrum facilis.</div>
    <div class="item">Nobis, eligendi, consectetur!</div>
    <div class="item">A, aperiam, esse.</div>
    <div class="item">Atque, hic, quasi.</div>
  </div>
  <div class="illustration">
    <div class="illustration__item illustration__item_active">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aspernatur voluptatum, corrupti debitis repellat voluptatibus facilis consequatur tempora perspiciatis tempore aliquam ipsa nemo laborum. Commodi excepturi ducimus velit reiciendis voluptates.</div>
    <div class="illustration__item">Quasi aperiam ipsum quas distinctio deserunt quo laudantium, fuga deleniti beatae, saepe, error ducimus! Quas cupiditate harum quod ex magnam, minima expedita quisquam molestiae, totam soluta quidem natus, tempore. Voluptatibus.</div>
    <div class="illustration__item">Impedit ab, hic commodi ex aliquid enim amet molestias vitae adipisci. Cumque saepe consequuntur minus sapiente recusandae dicta consequatur iure, deleniti temporibus aliquid perferendis impedit neque laudantium atque, facilis sunt.</div>
    <div class="illustration__item">Porro expedita unde, voluptatibus similique dolorem! Molestias consequatur explicabo blanditiis, ex pariatur eaque! Totam molestias eligendi, ab aut quidem eum, sit quos repellat fugit veritatis provident, soluta dolores. Eaque, veritatis!</div>
    <div class="illustration__item">Perspiciatis, nesciunt. Quo esse, assumenda ullam nisi consequuntur iure dolore harum quibusdam nihil voluptate. Beatae reiciendis quisquam tempore, ipsam inventore animi. Officia unde ducimus iure quis a eos nemo! Saepe.</div>
  </div>
  <div id="out"></div>
</body>
</html>

CSS

.list {
  position: relative;
  margin: 30px;
  width: 320px;
}

.item {
  height: 30px;
}

.arrow {
  transition:1s;
  position: absolute;
  height: 30px;
  top: 0;
  left: 0;
  width: 100%;
  background-color: lime;
}

.arrow:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent lime;
  position: absolute;
  top: 0;
  right: -15px;
}

.illustration {
  
}

.illustration__item {
  display: none;
}

.illustration__item_active {
  display: block;
}

JavaScript

const list = document.querySelector('.list');
const arrow = document.querySelector('.arrow');
const illustration = document.querySelector('.illustration');

list.onmouseover = e => {
  const isItem = e.target.classList.contains('item');
  if(isItem) {
    const elementIndex = index(e.target)
    changeIllustration(elementIndex);
    changeArrowPosition(e.target.offsetTop);
  }
};

const ACTIVE_ILLUSTRATION_CLASS_NAME = 'illustration__item_active';

function changeIllustration(i) {
	illustration
  	.querySelector(`.${ACTIVE_ILLUSTRATION_CLASS_NAME}`)
    .classList.remove(ACTIVE_ILLUSTRATION_CLASS_NAME);

  illustration
  	.querySelector(`:nth-child(${i})`)
    .classList.add(ACTIVE_ILLUSTRATION_CLASS_NAME);
  
}

function changeArrowPosition(position) {
  arrow.style.top = `${position}px`;	
}

function index(el) {
    var children = Array
    	.from(el.parentNode.childNodes)
      .filter(e=>e.nodeType !== 3);
    var i = 0;
    for (; i < children.length; i++) {
        if (children[i] == el) {
            return i;
        }
    }
    return -1;
}