JSFiddle - React, Tailwind, and code Playground

HTML

<div data-theme="a" data-role="page" id="home">

  <div data-position="fixed" data-role="header">
   	 <h1>Game On</h1>
  </div>


        <div id="profile_container" data-role="content" data-transition="slide">
        </div> 

   
    <div data-role="footer"  data-position="fixed" > 
        <div data-role="navbar" > 
            <ul > 
                <li><a href="#home" id="home" data-icon="home">Home</a></li> 
                <li><a href="#create" id="create" data-icon="plus">Create</a></li> 
                <li><a href="#events" id="events" data-icon="bullets">Events</a></li> 
                <li ><a href="#nearby" id="nearby" data-icon="search">Nearby</a></li> 
            </ul> 
        </div> <!-- /navbar -->
   </div>

</div>

CSS

@charset "utf-8";

body{
	
	font-family: bank
}
#home{height:100%;}

@font-face {
    font-family: Woodshop;
    src: url('Fonts/Woodshop.otf');
   
}

@font-face {
    font-family: bank;
    src: url('Fonts/Bank.ttf');
   
}

.centered {
	margin-left:auto;
	margin-right:auto;
}



#user_image{

	border:solid 2px #FFF;
	border-top-right-radius:10px;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
	height:30%;

}



html, body{height:100%;}

#profile_container{
    min-height:100%;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;

}


.name{
	display:block;
	float: left;
	clear: left;
	color: white;
	font-size:18px;
	font-weight:bold;
   
}

.alignCen{
	text-align:center;
	
}


#stats_tabe td{
	 padding-left:8px;
	 font-weight:bold;
	
}

#stats_top{
	border-bottom: solid 1px;
	border-right: solid 2px;
}

#stats_bottom{
	border-top: solid 1px;
	border-right: solid 2px;
}

#stats_number_top{
	border-bottom: solid 1px;
	
}
#stats_number_bottom{
	border-top: solid 1px;
}



#stats_tabe{
	border:solid 2px #FFF;
	background-color:#333333;
	width:100%;
	height:20%;
	margin-top:20px;
	border-radius:10px;
	margin-left:auto;
	margin-right:auto;
	font-size:16px;
    text-shadow:
    -1px -1px 0 #333333,
    1px -1px 0 #333333,
    -1px 1px 0 #333333,
    1px 1px 0 #333333;
	
	
}

#profile_table{
	width: 100%;
	height: 100%;
	font-family: bank;
	border:none;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	text-shadow:
    -1px -1px 0 #333333,
    1px -1px 0 #333333,
    -1px 1px 0 #333333,
    1px 1px 0 #333333;
	}



#profile_data_name{	
   text-align:left;
   height:10px;
   font-size:13px;
   padding-left:3px;
   padding-bottom:3px;
   line-height:15px;
	
}

#profile_data{	
  font-size:13px;
  text-shadow: 1px 1px 1px  black;
  
   
}



#profile_data_block_left{	

	background-color:#333333;	
	border-bottom:solid 2px #FFF;
	border-top:solid 2px #FFF;
	border-right:solid 2px #FFF;
   ...