Code of earch bar

Mayank Kolwal

Email

<div class=”search-container”>
<input type=”text” placeholder=”🔍 Search UI Code…”>
<button>Search</button>
</div>

body{
background:#f5f7ff;
font-family:Arial,sans-serif;
}

.search-container{
width:600px;
max-width:90%;
margin:50px auto;
display:flex;
background:linear-gradient(135deg,#6a11cb,#2575fc,#00c6ff);
padding:6px;
border-radius:50px;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.search-container input{
flex:1;
border:none;
outline:none;
padding:16px 22px;
border-radius:45px;
font-size:18px;
background:#ffffff;
}

.search-container button{
border:none;
outline:none;
margin-left:8px;
padding:16px 30px;
border-radius:45px;
background:linear-gradient(135deg,#ff6a00,#ffcc00);
color:#fff;
font-size:18px;
font-weight:bold;
cursor:pointer;
transition:.3s;
}

.search-container button:hover{
transform:scale(1.05);
background:linear-gradient(135deg,#ff3d00,#ff9800);
}

// Dynamic code uploaded by the user
function helloWorld() {
    console.log("Success!");
}