JSFiddle - React, Tailwind, and code Playground

by skrbomb

HTML

<div class="input-box">
    <input type="text" id="username" class="input">

    <span onclick='submit()'><i class="fa-solid fa-magnifying-glass" style="color: #fff;"></i></span>

  </div>





  <script src="https://kit.fontawesome.com/f39681e931.js" crossorigin="anonymous"></script>

CSS

body{
  background-color:#2d1f78;
}
    
    
    .input-box {
      top:40%;
      left:35%;
      position: absolute;
    }

    .input {
      width: 50px;
      height: 38px;
      font-size: 14px;
      padding: 0 40px 0 20px;
      border: 1px solid #eee;
      border-radius: 40px;
      transition: width 0.5s;
      transition-delay: 0.1s;
    }

    .input-box span {
      width: 30px;
      height: 30px;
      line-height: 30px;
      color: #969696;
      text-align: center;
      background: #222;
      border-radius: 50%;
      font-size: 15px;
      cursor: pointer;
      position: absolute;
      top: 4px;
      right: 5px;
    }

    .input:focus {
      width: 150px;
      outline: none;
      box-shadow: none;
      transition-delay: 0;
    }

    .input:focus+span {
      background: pink;
      color: #fff;
    }

JavaScript

const userName=document.getElementById('username')
const submit=function(){
	alert(`${userName.value}先生/小姐您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！`)
}