JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!-- saved from url=(0022)http://localhost:5173/ -->
<html lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script type="module" src="./Fedilogue Search_files/client"></script>
      <link rel="icon" href="http://localhost:5173/favicon.ico">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Fedilogue Search</title>
     
   </head>
   <body class="homepage">
      <div id="app" data-v-app="">
         <div tabindex="0" class="hbmenu" data-v-b4e148ca="">
         <div data-v-b4e148ca="" class="center">
            <div data-v-b4e148ca="" class="logo section"><a data-v-b4e148ca="" class="logolink" href="http://localhost:5173/#" title="Fedilogue logo"><img data-v-b4e148ca="" src="./Fedilogue Search_files/logo.svg" alt="Fedilogue logo image"></a></div>
            <div data-v-b4e148ca="" class="searcharea section">
               <form data-v-b4e148ca="" name="search" method="get" action="http://localhost:5173/search">
                  <input data-v-b4e148ca="" class="searchinput" type="text" name="q"><input data-v-b4e148ca="" class="searchsubmit" type="submit" name="" value="Search">
                  <div data-v-b4e148ca="" class="clear"></div>
               </form>
            </div>
         </div>
         </div></div>
   </body>
</html>

CSS

html,
body {
  /* To vertically center align */
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

h1,
h2,
h3,
h4,
a {
  color: #666666;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 10px;
}

.homepage {
  text-align: center;
  /* To vertically center align */
  display: table-cell;
  vertical-align: middle;

}



*[data-v-b4e148ca] {
         margin: 0;
         padding: 0;
         font-family: sans-serif;
         box-sizing: border-box;
         }
         .clear[data-v-b4e148ca] {
         clear: both;
         }
         a[data-v-b4e148ca] {
         text-decoration: none;
         }
         a[data-v-b4e148ca]:hover {
         text-decoration: underline;
         }
         .section[data-v-b4e148ca] {
         margin: 50px auto;
         }
         .searcharea[data-v-b4e148ca] {
         border: 1px solid #b3b3b3;
         border-radius: 30px;
         max-width: 800px;
         }
         .searchinput[data-v-b4e148ca] {
         width: 75%;
         color: #666666;
         background: none;
         border: none;
         font-size: 22px;
         float: left;
         padding: 10px 25px;
         box-sizing: border-box;
         outline: none;
         }
         .searchsubmit[data-v-b4e148ca] {
         float: right;
         width: 20%;
         background: #333333;
         color: #f2f2f2;
         border: none;
         border-radius: 30px;
         padding: 10px 20px;
         margin: 2px;
         font-size: 18px;
         cursor: pointer;
         }
         .links.section li[data-v-b4e148ca] {
         display: inline-block;
         margin: 0 10px;
         color: #666666;
         }
         .center[data-v-b4e148ca] {
         text-align: center;
         /* To vertically center align */
         display: table-cell;
         vertical-align: middle;
         }
         .hbmenu[data-v-b4e148ca] {
         position: absolute;
         top: 0;
         right: 0;
         background: #ffffff;
         /* Remove...