JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page ng-scope" style=" background-size: cover; -webkit-background-size: cover; position: fixed; left: 0px; min-height: 100%; background-position: 50% 50%; background-repeat: no-repeat no-repeat; width: 100%">

 

<div id="search-controls">
        <input ng-model="query" id="search" type="search" style=" margin-bottom:1.5%; margin-top: 1.5%; text-align: right;z-index: 63;position: relative;" placeholder="      Search     " class="ng-pristine ng-valid">
        <img id="searchImg" src="images/search_icon.png">
        <span style="color: white; padding: 1%; font-size: 75%">
some text        </span>
    </div>

CSS

input#search {
background-repeat: no-repeat;
text-indent: 20px;
background-position: right;
}

input[type=search] {
height: 34px;
font-size: 14px;
border-radius: 30px;
    width: 100%;
}

#searchImg {
position: absolute;
right: 8px;
top: 13px;
z-index: 64;
}
#search-controls {
background-color: #00008b;
top: 43px;
position: absolute;
width: 100%;
text-align: center;
}