JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Roleplay Games Co.</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Logo -->
    <div class="logo">
      <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80" alt="Roleplay Games Co. logo" />
    </div>

    <!-- Navigation -->
    <nav>
      <ul>
        <li><a href="#hero">Home</a></li>
        <li><a href="#games">Games</a></li>
        <li><a href="#teams">Teams</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>

    <!-- Hero section -->
    <section id="hero">
      <h1>Experience the Best in Roleplay Gaming</h1>
      <p>At Roleplay Games Co., we create immersive, engaging games that transport you to new worlds and allow you to live out your wildest fantasies. From epic battles to intricate plots, our games offer endless hours of entertainment and adventure.</p>
      <button>Learn More</button>
    </section>

    <!-- Gallery of games -->
    <section id="games">
      <h2>Our Games</h2>
      <div class="game">
        <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80" alt="Game 1" />
        <h3>Game 1</h3>
        <p>Description of game 1 goes here</p>
      </div>
      <div class="game">
        <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80" alt="Game 2" />
        <h3>Game 2</h3>
        <p>Description of game 2 goes here</p>
      </div>
      <div class="game">
        <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80" alt="Game 3" />
        <h3>Game 3</h3>
        <p>Description of...

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  height: 80px;
}

.logo img {
  height: 50px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #333;
  height: 80px;
  padding: 0 20px;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 0 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
  background-image: url('https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80');
  background-size: cover;
  color: #fff;
  text-align: center;
}

#hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

#hero p {
  font-size: 24px;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

#hero button {
  font-size: 16px;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

#games {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 0;
}

#games .game {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  margin: 20px;
  text-align: center;
}

#games .game img {
  width: 300px
}

#games .game h3 {
  font-size: 24px;
  margin: 20px 0;
}

#games .game p {
  font-size: 16px;
  max-width: 300px;
}

#teams {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 0;
}

#teams .team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  margin: 20px;
  text-align: center;
}

#teams .team-member img {
  width: 200px;
  border-radius: 50%;
  margin-bottom: 20px;
}

#teams .team-member h3 {
  font-size: 24px;
}

#teams .team-member p {
  font-size: 16px;
}

#contact {
 ...