JSFiddle - React, Tailwind, and code Playground

HTML

<div class='block'>
    <div class='text'>Здесь текст<div class='more_text'>Здесь больше текста...</div></div>
</div>

CSS

/* это сам блок, в котором все хранится */
	.block{ 
		background: black;
		height: 300px;
		width: 250px;
		overflow: hidden;
	}
	
	/* это золотой блок со всем текстом */
	.text{
		background: gold;
		position: relative;
		padding: 15px;
		font-size: 14pt;
		height: 100%;
		margin-top: 100%;
		cursor: pointer;
		transition: 0.5s margin-top; /* это свойство анимации 0.5s - это время, margin-top - что анимируем */
	}
	/* класс .show меняет margin-top со 100% до 0 - то есть поднимает блок вверх */
	.text.show{margin-top: 0;}
	
	/* это часть золотого текста - в нем хранится остальной текст */
	.more_text{
		margin-top: 25px;
		font-size: 11pt;
	}

JavaScript

//При нажатии на .text - на "нем переключается" класс .show, который регулирует уровень блока margin-top'ом
$('.text').click(function(){
		$(this).toggleClass('show');
	});