JSFiddle - React, Tailwind, and code Playground

HTML

<div class="show_box"></div>
<div class="show_box"></div>
<div class="show_box"></div>
<div class="show_box"></div>
<div class="show_box"></div>
<div class="show_box"></div>
<div class="show_box"></div>
<div class="show_box"></div>
<div class="show_box"></div>
<div class="more">more</div>

CSS

body {
	counter-reset: show_box;
}
.show_box,
.more {
    border: 1px solid rgba( 200, 200, 250, .9 );
    margin: .5em;
	padding: .3em 0;
	text-align: center;
    width: 150px;
}
.show_box::before {
    counter-increment: show_box;
	content: counter( show_box );
}

.more {
    cursor: pointer;
}

JavaScript

jQuery( '.show_box:gt(2)' ).addClass( 'show_box_hide' ).hide();
jQuery( '.more' ).on( 'click', function() {
    jQuery( '.show_box_hide:lt(3)').removeClass( 'show_box_hide' ).slideDown( 'fast' );
    if ( jQuery( '.show_box.show_box_hide' ).length === 0 ) { jQuery( '.more' ).hide(); }
} );