JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
      <div class="center">
        <h1>Welcome to CSGOCarry</h1>
        <h3>Where Dreams Come True</h3>
      </div>
    </div>
    <div class="navbar">
      <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="Jackpot.asp">Jackpot</a></li>
        <li><a href="Coinflip.asp">Coinflip</a></li>
        <li><a href="roulette.asp">Roulette</a></li>
      </ul>
      </div>

CSS

body {
  background-image: url("csgocarryback.jpg");
  background-size: 100%;
}

h1 {
  color:white; 
  text-align:center; 
  font-size:58px;
}
h3 {
    text-align:center;
    color:white;
    font-size: 28px;
    margin-top: -40px;
}
.container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}
.center {
}

ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    
}

li {
     float: left;
}

li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      
}

/* Change the link color to #111 (black) on hover */
li a:hover {
      background-color: #111;
}
.navbar{
  
  margin: -10px;
}