JSFiddle - React, Tailwind, and code Playground

by Vinay Pratap Singh Bhadauria

HTML

<ul>
		<li class="box">
			<div class="close" ></div>
			<div class="head"> Header </div>
			<p class="area">
				This is Paragraph
			</p>
		</li>
		<li class="box">
			<div class="close" ></div>
			<div class="head"> Header </div>
			<p class="area">
				This is Paragraph
			</p>
		</li>
	</ul>

CSS

ul { position: static; bottom: -4px; width: 1150px;  min-height: 250px; overflow: hidden; }
ul li {
	position: relative;
	border: 1px solid lightgray;
	width: 260px;
	background-color: #f2f2f2;
	display: inline-block;
	margin: 0 2px;
}
ul li .head {
	font-weight: bold;
	padding: 5px;
	background-color: #6D84B4;
	color: white;
	border: 1px solid #6D84B4;
	text-align: right;
}
p.area { padding: 8px; height: 200px; }
.minimize { vertical-align: bottom;}

JavaScript

$( document ).on( "click", "ul li .head", function() {
		
		$(this).parent('li').toggleClass( 'minimize' );
		$(this).parent('li').closest('p').toggle();
		
	});