Input by ozgeozkaraa01

1.group {
2  display: flex;
3  line-height: 30px;
4  align-items: center;
5  position: relative;
6  max-width: 200px;
7}
8
9.input {
10  width: 100%;
11  height: 45px;
12  line-height: 30px;
13  padding: 0 5rem;
14  padding-left: 3rem;
15  border: 2px solid transparent;
16  border-radius: 10px;
17  outline: none;
18  background-color: #f8fafc;
19  color: #0d0c22;
20  transition: .5s ease;
21}
22
23.input::placeholder {
24  color: #94a3b8;
25}
26
27.input:focus, input:hover {
28  outline: none;
29  border-color: rgba(129, 140, 248);
30  background-color: #fff;
31  box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);
32}
33
34.icon {
35  position: absolute;
36  left: 1rem;
37  fill: none;
38  width: 1rem;
39  height: 1rem;
40}