JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<form action="#">
  <input type="hidden" name="form" value="form6c">
  <label>
    <input type="text">
  </label>
  <input type="submit" value="Search" title="Search">
</form>

CSS

form {
  position: relative;
}
input[type="text"] {
  background: none;
  border: none;
}
input[type="submit"] {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
  font-size: 0;
  background: url(https://cdn2.iconfinder.com/data/icons/gnomeicontheme/24x24/stock/navigation/stock_zoom-optimal.png) no-repeat center center;
  border: none;
  cursor: pointer;
}
label {
  display: inline-block;
  padding: 6px 6px 6px 36px;
  border: 1px solid silver;
  border-radius: 6px;
}