JSFiddle - React, Tailwind, and code Playground

by adityaparmar03

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      * {
        box-sizing: border-box;
      }

      .club input[type=text] {
        padding: 10px;
        font-size: 17px;
        border: 1px solid black;
        border-right: 0px solid black;
        float: left;
        width: 90%;
      }

      .club button {
        float: left;
        width: 10%;
        padding: 10px;
        background: white;
        color: black;
        font-size: 17px;
        border: 1px solid grey;
        border-left: none;
        cursor: pointer;
      }

    </style>
  </head>

  <body>

    <div class="club">
      <input type="text" placeholder="Search.." name="search2">
      <button type="submit"><i class="fa fa-search"></i></button>
      <div>

  </body>

</html>