search bar html css in react - html

Question

I am trying to use a search bar css from code pen. I used their exact code but the search bar seems to be really buggy on react.
Here is code sandbox for better reference. https://codesandbox.io/s/sad-moser-mdxmd?file=/src/Dashboard.js
Here's the code that I am currently using.
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" id="input_text"></input>
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I want the search bar to look like this: enter image description here
This is the link to the code that I attempted to use.
https://codepen.io/huange/pen/rbqsD

Answer 1

because you are using simple html you have to use jsx here. Use any online jsx convertor like "https://magic.reactjs.net/htmltojsx.htm" etc.
for this you can use :
<div className="wrap">
<div className="search">
<input type="text" className="searchTerm" id="input_text" />
<button type="submit" className="searchButton">
<i className="fa fa-search" />
</button>
</div>
</div>