<!-- you should run the page with debug mode to use search thing :) -->
<div class="googlesearch">
  <h1>Google</h1>
  <form action="https://www.google.com/search">
    <label for="googlesearch"></label>
    <input type="text" placeholder="Search on Google" name="q" id="googlesearch">
    <span class="fa fa-search errspan" aria-hidden="true"></span>
    <button>Search</button>
  </form>
</div>

<div class="redditsearch">
  <svg xmlns="http://www.w3.org/2000/svg" width="235" id="svg129" xml:space="preserve" y="0" x="0" version="1.1" viewBox="-42.81168 -22.6 371.03456 135.6">
    <style id="style112" type="text/css">
      .st1 {
        fill: #fff
      }
    </style>
    <g transform="translate(-257.2 -96.4)" id="Artwork">
      <circle id="circle114" r="10.6" cy="113.7" cx="495.4" fill="#ff4500" />
      <path id="path116" d="M344 158.9c5.2 0 8.2-3.9 8-7.7-.1-2-.3-3.3-.5-4.3-3.2-13.8-14.4-24-27.7-24-15.8 0-28.6 14.3-28.6 31.9 0 17.6 12.8 31.9 28.6 31.9 9.9 0 17-3.6 22.1-9.3 2.5-2.8 2-7.1-1-9.2-2.5-1.7-5.6-1.1-7.9.8-2.2 1.9-6.4 5.7-13.2 5.7-8 0-14.8-6.9-16.3-16H344zM323.7 135c7.2 0 13.4 5.6 15.7 13.3H308c2.3-7.8 8.5-13.3 15.7-13.3z" class="st1" />
      <path id="path118" d="M295.8 129.2c0-3-2.2-5.4-5-5.9-8.7-1.3-16.9 1.9-21.6 7.8v-.8c0-3.7-3-6-6-6-3.3 0-6 2.7-6 6v49c0 3.2 2.4 6 5.6 6.2 3.5.2 6.4-2.5 6.4-6v-25.3c0-11.2 8.4-20.4 20-19.1h1.2c3-.2 5.4-2.8 5.4-5.9z" class="st1" />
      <path id="path120" d="M501.4 135.6c0-3.3-2.7-6-6-6s-6 2.7-6 6v43.9c0 3.3 2.7 6 6 6s6-2.7 6-6v-43.9z" class="st1" />
      <path id="path122" d="M412.2 102.4c0-3.3-2.7-6-6-6s-6 2.7-6 6v26.7c-4.1-4.1-9.2-6.1-15.3-6.1-15.8 0-28.6 14.3-28.6 31.9 0 17.6 12.8 31.9 28.6 31.9 6.1 0 11.3-2.1 15.4-6.2.5 2.8 3 4.9 5.9 4.9 3.3 0 6-2.7 6-6v-77.1zM385 174.9c-9.2 0-16.6-8.9-16.6-20 0-11 7.4-20 16.6-20 9.2 0 16.6 8.9 16.6 20s-7.5 20-16.6 20z" class="st1" />
      <path id="path124" d="M474.8 102.4c0-3.3-2.7-6-6-6s-6 2.7-6 6v26.7c-4.1-4.1-9.2-6.1-15.3-6.1-15.8 0-28.6 14.3-28.6 31.9 0 17.6 12.8 31.9 28.6 31.9 6.1 0 11.3-2.1 15.4-6.2.5 2.8 3 4.9 5.9 4.9 3.3 0 6-2.7 6-6v-77.1zm-27.3 72.5c-9.2 0-16.6-8.9-16.6-20 0-11 7.4-20 16.6-20 9.2 0 16.6 8.9 16.6 20s-7.4 20-16.6 20z" class="st1" />
      <path id="path126" d="M531.8 179.6V135h5.3c2.8 0 5.3-2.1 5.5-5 .2-3.1-2.3-5.7-5.3-5.7h-5.5v-8.4c0-3.2-2.4-6-5.6-6.2-3.5-.2-6.4 2.5-6.4 6v8.7h-5c-2.8 0-5.3 2.1-5.5 5-.2 3.1 2.3 5.7 5.3 5.7h5.1v44.6c0 3.3 2.7 6 6 6 3.5-.2 6.1-2.8 6.1-6.1z" class="st1" />
    </g>
  </svg>
  <form action="https://www.reddit.com/search">
    <input type="text" placeholder="Search on Reddit" name="q" id="redditsearch">
    <span class="fa fa-search errspan" aria-hidden="true"></span>
    <button>Search</button>
  </form>
</div>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* google */

.googlesearch {
  height: 50%;
  margin: 0 auto;
  border: 1px solid black;
  color: white;
  background: #202124;
  padding: 110px;
  border-top: 3px solid #4285f4;
}

.googlesearch h1 {
  text-align: center;
  font-size: 64px;
  margin-bottom: 12px;
}

.googlesearch button {
  width: 120px;
  border: 0;
  outline: 0;
  border-radius: 12px;
  padding: 10px;
  font-weight: bold;
  color: white;
  background: #303134;
  border: 1px solid #303134;
  display: block;
  margin: 26px auto;
}

.googlesearch button:hover {
  border: 1px solid #4285f4;
  box-sizing: border-box;
}

.googlesearch input {
  border: 0;
  padding: 12px;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  width: 47%;
  color: white;
  background: #202124;
  border: 0;
  border: 1px solid grey;
  font-family: "Montserrat", sans-serif;
}

.googlesearch input:focus {
  outline: none;
}

.googlesearch input placeholder {
  margin-left: 12px;
}

.googlesearch input:hover {
  background: #303134;
}

.errspan {
  float: left;
  margin-right: 12px;
  margin-top: -30px;
  position: relative;
  z-index: 2;
  left: 68%;
}

/* reddit */

.redditsearch {
  height: 475px;
  margin: 0 auto;
  border: 1px solid black;
  color: white;
  background: #202124;
  padding: 110px;
  border-top: 3px solid #ff6314;
}

.redditsearch input {
  border: 0;
  padding: 12px;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  width: 47%;
  color: white;
  background: #202124;
  border: 1px solid grey;
  font-family: "Montserrat", sans-serif;
}

.redditsearch svg {
  display: block;
  margin: 0 auto;
  margin-bottom: 12px;
}

.redditsearch button {
  width: 120px;
  border: 0;
  outline: 0;
  border-radius: 12px;
  padding: 10px;
  font-weight: bold;
  color: white;
  background: #303134;
  border: 1px solid #303134;
  display: block;
  margin: 26px auto;
}

.redditsearch button:hover {
  border: 1px solid #ff6314;
}

.redditsearch input:focus {
  outline: none;
}

.redditsearch input:hover {
  background: #303134;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.