JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="06.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>

<body>
  <h1 style="text-align: center; color: #fff; font-size: 20px; height: 0;">自學網頁の嬰兒教材：第6課 ── 在自己電腦上寫網頁</h1>

  <nav>
    <h1><a href="" target="_self"><i class="fa-solid fa-gamepad"></i></a></h1>
    <ul>
      <li><a href="" target="_self">討論區</a></li>
      <li><a href="" target="_self">關於我們</a></li>
      <li><a href="" target="_self">加入我們</a></li>
    </ul>
  </nav>
  <div class="main">
    <div class="title">
      <h1>玩家盛世</h1>
      <h2>最完善的電玩資訊與攻略平台</h2>
    </div>
    <form action="" method="post" target="_self" class="search">
      <input type="text" placeholder="搜尋電玩新聞或攻略" required>
      <label for="submit"><i class="fa-regular fa-paper-plane"></i></label>
      <input type="submit" id="submit" value="送出">
    </form>
  </div>

</body>

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100%;
  background: transparent url("https://fastly.picsum.photos/id/96/4752/3168.jpg?hmac=KNXudB1q84CHl2opIFEY4ph12da5JD5GzKzH5SeuRVM") no-repeat center center / cover;
}

nav {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 10px 20px;
  background-color: transparent;
}

nav::after {
  clear: both;
  content: "";
  display: block;
}

nav h1,
nav ul {
  display: inline-block;
}

nav h1 {
  float: left;
}

nav ul {
  float: right;
  font-size: 0;
}

nav ul li {
  display: inline-block;
}

nav a {
  display: inline-block;
  font-size: 18px;
  font-weight: 900;
  padding: 5px 10px;
  text-decoration: none;
  color: #fff;
}

nav h1 i {
  display: inline-block;
  font-size: 26px;
  color: #fff;
}

nav a:hover,
nav h1 a:hover i {
  color: #ccc;
  transition: 0.5s;
}

.main {
  width: 50%;
  max-width: 500px;
  margin: 200px auto;
  text-align: center;
  padding: 50px;
  border: 5px solid #fff;
  border-radius: 10px;
}

.main .title {
  margin-bottom: 50px;
}

.main .title h1 {
  font-size: 50px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 1px;
}

.main .title h2 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.main .search {
  font-size: 0;
  width: 100%;
  display: flex;
  align-items: center;
}

.main .search input[type="text"],
.main .search label {
  height: 40px;
  background-color: #fff;
  box-sizing: border-box;
}

.main .search input[type="text"] {
  font-size: 16px;
  outline: none;
  border: none;
  border-radius: 30px 0 0 30px;
  width: 80%;
  padding: 5px 20px;
}

.main .search label {
  border-radius: 0 30px 30px 0;
  width: 20%;
  cursor: pointer;
  padding: 5px 10px;
  background-color: #ccc;
}

.main .search label i {
  display: inline-block;
  font-size: 20px;
  color: #fff;
  /* input[type="text"]和label的高度 - 上下個別5 padding */
  line-height: 30px;
}

.main .search label:hover i {
  color: #000;
}

.main .search input[type="submit"] {
  display:...