JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="rectangle">
  <form id="form1" action="/action_page.php" class="inputWrapper">

    <input id="search" class="rectangle-copy-2" type="text" placeholder="Search.." name="search">    <button type="submit" class="bg">Search<i class="fa fa-search"></i></button>
    
  </form>
</div>

CSS

* {
  box-sizing: border-box;
}

.rectangle {
  height: 115px;
  width: 100%;
  background-color: #F5F5F5;
  padding: 35px 100px 0 100px;
}

.rectangle-copy-2 {
  height: 45px;
  border: 1px solid #AFAFAF;
  border-radius: 17px;
  background-color: #FFFFFF;
  color: #333333;
  font-family: Arial, Sans-serif;
  font-size: 16px;
  line-height: 24px;
  width: 100%;
  padding: 10px 25px 10px 25px;
  margin-right: -145px;

  /*
  box-shadow: 0 2px 4px 0 #E1E1E1; */
}

.bg {
  height: 45px;
  width: 142px;
  border-radius: 17px;
  background-color: #E60028;
  color: #FFFFFF;
  font-family: Museo, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  float: right;
  margin-right: -150px;
  border:none;
}

.inputWrapper {
  width: 100%;
  padding-right: 150px;
}

.bg i {
  padding-left: 16px;
}

JavaScript

var vnLibSearch = function() {
  var permitted_page = "https://author-rmit-uat.adobecqms.net/content/rmit/au/en/daves-uat-test-page/vn-library-search-test.html?wcmmode=disabled";
  var current_page = document.location.href;
  //alert(document.URL);
  if (permitted_page == current_page) {
    document.getElementById('libsearch').addEventListener('submit', function(e) {
      e.preventDefault();
      var elemVal = document.getElementById('search').value;
      window.location = "https://rmitlibraryvn.rmit.edu.vn/discovery/search?query=any,contains," + elemVal + "&tab=Everything&search_scope=MyInst_and_CI&vid=84RVI_INST:84RVI&offset=0";
    }, false);
  }

}();