JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="note">
  <h3>test</h3>
  <p class="para">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo
  </p>
</div>
<div class="note">
  <h3>test</h3>
  <p class="para">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo
  </p>
</div>
<div class="note">
  <h3>test</h3>
  <p class="para">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo
  </p>
</div>

CSS

div.note {
	position: relative;
	overflow: hidden;
}
div.note h3 {
	background: #8bc53f;
	padding: 10px;
	margin: 0;
	cursor: pointer;
}
div.note p {
	padding: 0 10px;
	margin: 0;
	padding-top: 10px;
	background: #338eb8;
	display: none;
}
div.note p.active {
	display: block;
}

JavaScript

$('.note').hover(function(){
	$(this).find('p').slideDown();
},function(){
	$(this).find('p').slideUp();
})