JSFiddle - React, Tailwind, and code Playground

HTML

<div class="buttons">
    <div class="container">
        <div class="button1"><p>1</p></div>
        <div class="button2"><p>2</p></div>
    </div>
</div>

CSS

.buttons{
	width:100%;
}
.buttons .container{
	text-align:center;
}
.button1, .button2{
	display:inline-block;
	width:0;
	height:0;
	border-left:40px solid transparent;
	border-right:40px solid transparent;
	border-top:40px solid #CC0000;
	cursor:hand; cursor:pointer;
}
.button1 p, .button2 p{
	position:absolute;
	color:#F9F9F9;
	z-index:9999;
	margin-top:-30px;
    margin-left:-2px;
	font-size:7px;
}

JavaScript

$(window).load(function(){
    $('.button2').hide();
});
$('.button1').click(function(){
    $('.button1').hide();
    $('.button2').show();
});
$('.button2').click(function(){
    $('.button2').hide();
    $('.button1').show();
});