JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hidden-md-down nav navbar-nav navbar-right">
      <span id="dnn_dnnSEARCH_ClassicSearch">
         <span class="searchInputContainer" data-moreresults="Bekijk alle resultaten" data-noresult="Geen resultaten gevonden"> 
             <input name="dnn$dnnSEARCH$txtSearch" type="text" maxlength="255" size="20" id="dnn_dnnSEARCH_txtSearch" class="NormalTextBox"                     autocomplete="off" placeholder="Search...">
             <a class="dnnSearchBoxClearText"></a>
         </span>
         <a id="dnn_dnnSEARCH_cmdSearch" class="SkinObject" href="javascript:__doPostBack('dnn$dnnSEARCH$cmdSearch','')"></a>
      </span>
</div>

CSS

#dnn_dnnSEARCH_txtSearch {
  background: url(https://crmassistent.com/Portals/32-System/Skins/CRMAssistent/images/search-icon.png) no-repeat 9px center;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  width: 0px;
  border-radius: 10em;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  content: "";
  padding: 9px 10px 9px 32px;
  margin: 5px 0;
  border: none;
}

#dnn_dnnSEARCH_txtSearch:focus {
  width: 150px;
  cursor: pointer;
  border-radius: 10em;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  -webkit-box-shadow: 0 0 3px #f5f5f5;
  -moz-box-shadow: 0 0 3px #f5f5f5;
  box-shadow: 0 0 3px #f5f5f5;
  outline:0;
  color: rgba(245, 245, 245, 0.75);
}

#dnn_dnnSEARCH_txtSearch input[type="placeholder"] {
  padding: 5px;
  font-style: normal!important;
  color: #000;
  font-size: 13px;
  content: ""
}

.searchInputContainer a.dnnSearchBoxClearText{
  display:none!important;
}

input[type="text"]{
  font-size: 13px;
  font-style: italic;
}