JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="stuff">
  <div class="feature">
    <h2>Lorem ipsum dolor.</h2>
    <p class="details">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sed reiciendis optio harum omnis alias dolores. Recusandae rerum, veniam reprehenderit voluptas possimus cumque quibusdam atque.</p>
  </div>
  <div class="feature">
    <h2>At, possimus, veritatis.</h2>
    <p class="details">In fugiat amet atque iusto sapiente aut perferendis eius, ullam laborum unde ut dolor similique laudantium? At ullam quos fuga officiis nihil quae, ducimus error.</p>
  </div>
</div>

CSS

.stuff {
  display: flex;
  flex-flow: row nowrap;
}

.details {
  display: none;
}


.active .details {
  display: block;
}

JavaScript

$('.stuff .feature').on('mouseenter touchstart', function() {
	$(this).addClass('active');
});

$('.stuff .feature').on('mouseleave touchend', function() {
	$(this).removeClass('active');
});