JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Google Search</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <div class="gimage">
        <img
          src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
          alt="Google logo"
        />
      </div>
      <div class="link">
        <a href="./img.html" class="search" target="_blank">Image Search</a>
        <a href="./advanced.html" class="search" target="_blank"
          >Advanced Search</a
        >
      </div>

      <div class="form">
        <form action="https://www.google.com/search">
          <input class="input1" type="text" name="q" /><br /><br />
          <div>
            <input
              type="submit"
              name="btnK"
              value="Google Search"
              class="button"
            />
            <input
              type="submit"
              name="btnI"
              value="I am Feeling Lucky"
              class="button"
            />
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

CSS

/* Here we have a flex container 
 */.container {
  height: 600px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

div.link {
  position: fixed;
  top: 20px;
  right: 10px;
}

a.search {
  color: rgb(0, 0, 50);
  font-size: 15px;
  text-decoration: none;
  margin: 20px;
}

a.search:hover {
  text-decoration: underline;
}
.input1 {
  border-radius: 25px;
  width: 600px;
  height: 40px;
  border-style: solid;
  border-color: rgb(224, 223, 223);
}
.input1 {
  outline: none;
}

.button {
  border-radius: 5px;
  width: 150px;
  height: 35px;
  margin: 10px;
  padding: 0;
  border: none;
  background: none;
  background-color: rgb(240, 240, 240);
}
.button:hover {
  border: 1px solid #b6b5b5;
}
.form {
  text-align: center;
}

#gimage2 > img {
  width: 350px;
  padding-bottom: 30px;
}