JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ts_box">
	<div id="ts_container">
		<div id="start_1">
			<div class="ts_row">
				<div class="ts_block">
					<div class="ts_inner_row">
						<div class="ts_column">
							<div class="ts_content">
								<p>Click this button to get started.</p>
							</div>
						</div>
					</div>
					<div class="ts_inner_row">
						<div class="ts_column">
							<div class="option_button">
								<button id="start">Let's Get Started</button>
							</div>
							<div class="option_enter" id="click_1">press Enter</div>
						</div>
					</div>
				</div>
				<div class="ts_inner_row">
					<div class="ts_column">
						<div class="ts_image"></div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Choose AC or Heat Screen -->
		<div id="step_0">
			<div class="ts_row">
				<div class="ts_block">
					<div class="ts_inner_row">
						<div class="ts_column">
							<div class="ts_content">
								<p>Which system are you having problems with?</p>
							</div>
						</div>
					</div>
					<div class="ts_inner_row">
						<div class="ts_column">
							<div class="option_number" id="click_2">1</div>
							<div class="option_content">
								<a href="#" id="AC">Air Conditioning</a>
							</div>
						</div>
					</div>
					<div class="ts_inner_row">
						<div class="ts_column">
							<div class="option_number" id="click_3">2</div>
							<div class="option_content">
								<a href="#" id="Heat">Heating</a>
							</div>
						</div>
					</div>
				</div>
				<div class="ts_inner_row">
					<div class="ts_column">
						<div class="ts_image"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

#ts_box button, select{
	background-color: #59585d;
    color: #a7aaae;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
    text-shadow: -1px -1px 0px black;
    border: 2px solid black;	
}
#ts_box button:hover, select:hover{
	background-color: #ff2b00;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
    text-shadow: -1px -1px 0px grey;
    border: 2px solid black;
	transition: 0.5s;
}

.ts_row{
	display:flex;
	text-shadow: 1px 1px 1px #59585d;
	color:white;
	justify-content:center;
}

.ts_block{
	margin:25px;
	width: 75%;
	border-right: 5px solid darkgrey;
	padding: 5% 10% 5% 10%;
	text-align: center;
}

.ts_column{display:flex;justify-content:center;align-items: baseline;}

.ts_content{}

.ts_inner_row{}

.option_enter{font-size:12px;margin:12px 0px 0px 10px;}

.option_content{
	margin-bottom:15px;
	background-color:#808386;
	padding:2px 20px 2px 20px;
	border: 1px solid #708386;
	min-width:100%;
}

.ts_image{}

.ts_row a{color: #fff;}

.option_button{}

.ts_column .option_number{
	font-size: 1rem;
	background-color: #59585d;
	padding: 5px 15px 5px 15px;
	border: 2px solid black;
	color: #fff;
	text-shadow: 2px 2px 2px black;
	border-radius: 5px;
}
#ts_contact{
	margin: 20px;
}	
#ts_contact .wpforms-field-label, #ts_contact .wpforms-field-sublabel{
	text-shadow: 1px 1px 1px #59585d;
	color: #fff;
	font-weight:100;	
}
#ts_contact_title{
	font-size: min(max(1rem, 3vw), 30px);
	color: #fff;
	text-shadow: 1px 1px 1px #59585d;
	text-align: center;
	}
#service_form{}

#ts_box{display:flex;align-items:center;justify-content:center;}

#ts_container{
	width:75%;
	min-height:600px;
	display:flex;
	background-image: linear-gradient(45deg, #808386, #d0d5d7);
	border: 5px solid #59585d;
	margin: 20px 0px 20px 0px;
}

#start_1{opacity:1; width:100%; visibility: visible; display:block;}	
#step_0{opacity:0; width:100%; visibility:hidden; display:none;}
#step_AC_1{opacity:0; width:100%; visibility:hidden;...

JavaScript

jQuery(document).ready(function($) {
	
	$('#start').click(function() {
		$('#start_1').fadeTo( 'fast', 0 ).css('visibility','hidden').css('display','none');
		$('#step_0').delay( 800 ).css('visibility','visible').css('display','block').fadeTo( 'slow', 1 );
		
	});
		$(function(){
			$(document).on('keypress',(function(e) {
				if ($('#click_1').is(':visible') && e.which== 13 ){
						$('#start_1').fadeTo( 'fast', 0 ).css('visibility','hidden').css('display','none');
						$('#step_0').delay( 800 ).slideUp( 300 ).css('visibility','visible').css('display','block').fadeTo( 'slow', 1 );
				}
			}));
		});
});