1<div class="input-container">
2  <input placeholder="Add Item" type="text" />
3</div>          

 1.input-container {
 2  display: flex;
 3  background: white;
 4  border-radius: 1rem;
 5  background: linear-gradient(173deg, #23272f 0%, #14161a 100%);
 6  box-shadow:
 7    10px 10px 20px #0e1013,
 8    -10px -10px 40px #383e4b;
 9  padding: 0.3rem;
10  gap: 0.3rem;
11}
12 
13.input-container input {
14  border-radius: 0.8rem;
15  background: #23272f;
16  box-shadow:
17    inset 5px 5px 10px #0e1013,
18    inset -5px -5px 10px #383e4b,
19    0px 0px 100px rgba(255, 212, 59, 0),
20    0px 0px 100px rgba(255, 102, 0, 0);
21  width: 100%;
22  flex-basis: 100%;
23  padding: 1rem;
24  border: none;
25  border: 1px solid transparent;
26  color: white;
27  transition: all 0.2s ease-in-out;
28}
29 
30.input-container input:focus {
31  border: 1px solid #ffd43b;
32  outline: none;
33  box-shadow:
34    inset 0px 0px 10px rgba(255, 102, 0, 0.5),
35    inset 0px 0px 10px rgba(255, 212, 59, 0.5),
36    0px 0px 100px rgba(255, 212, 59, 0.5),
37    0px 0px 100px rgba(255, 102, 0, 0.5);
38}
39 
40@media (max-width: 500px) {
41  .input-container {
42    flex-direction: column;
43  }
44 
45  .input-container input {
46    border-radius: 0.8rem;
47  }
48}