JSFiddle - React, Tailwind, and code Playground

HTML

<input type="search" class="search-field" placeholder="Search" value="" name="s" />

CSS

input[type="search"] {
    color: #ffffff;
    height: 35px;
    margin: 0;
    padding: 10px;
    border: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0) linear-gradient(0deg, #820462 0%, #992478 100%);
    font-size:1rem;
}

input[type="search"]:focus {
    background: transparent;
}

input[type="search"]::-webkit-input-placeholder {
   color: #fff;
}