JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<div id="dave"><form method="GET" id="searchform" name="searchform" onsubmit="return false;">
  <input type="text" id="q" name="q" value="email-address" class="yui-ac-input" autocomplete="off" aria-label="Contextual Search" onfocus="value=''" onblur="value='email address please'"><span id="searchclear" class="fa fa-remove" style="display: none;"></span>
  <button type="submit" id="searchButton" value="" class="srchbtncustom" aria-label="Contextual Search "> <span class="cs-mobile-hide">Subscribe</span> </span>
  </button>
</form></div>

CSS

#searchform {
  width: 40%;
  height: 100px;
  
}

#searchform>input[type="text"]{
  left: 0;
  width: 66%;
  position: absolute;
  display: inline-block;
  direction: ltr;
  border: none;
  background: #ffffff;
  border-radius: 0px;
  font-family: Museo500;
  font-size: 18px;
  padding: 0 0 0 25px;
  height: 56px;
  color: #000054;
  box-shadow: none;
  outline: none;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}
#searchform .srchbtncustom {
    font-family: Museo500;
    width: 34%;
    height: 56px;
    padding: 15px 40px;
    border-radius: 0px;
    background: #e5001c;
    color: #FFF;
    position: relative;
    right: 0;
    font-size: 18px;
    border: none;
    outline: none;
    position: absolute;
    z-index: 0;
    box-shadow: none;
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
}