<div
      class="container d-flex justify-content-center align-items-center height"
    >
      <div class="row justify-content-md-center">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text primary" id="search-icon">
              <i class="fa fa-search" aria-hidden="true"></i>
            </span>
          </div>
          <input id="text" type="text" class="form-control form-rounded" />
        </div>
      </div>
    </div>
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

body,
html {
  height: 100%;
  font-family: "DM Mono", monospace;
  background-color: aliceblue;
}
#text {
  font-size: 1.52rem;
}
.height {
  height: 100%;
}

#text {
  border-left: none;
  border-radius: 0 30px 30px 0;
}

.input-group-text {
  background-color: #fff;
  border-radius: 30px 0 0 30px;
}
i {
  font-size: 1.3rem;
  margin-left: 1rem;
}
document.addEventListener("DOMContentLoaded", function () {
  const textElement = document.getElementById("text");
  const textArray = [
    "Software Engineer",
    "Data Scientist",
    "UX Designer",
    "Product Manager",
    "Project Manager",
    "DevOps Engineer",
    "Data Engineer",
    "Business Analyst",
    "Systems Analyst",
    "Web Developer",
    "App Developer",
    "Network Engineer",
    "Frontend Developer",
    "Backend Developer",
    "Full Stack",
    "Scrum Master",
    "Technical Support",
    "Database Admin"
  ];

  let pipe = true;
  let index = 0;
  let speed = 200;
  let isTyping = true;
  let textIndex = 0;

  function typeText() {
    let text = textArray[textIndex];
    if (pipe) {
      text += "|";
    }

    if (isTyping) {
      if (index < text.length) {
        textElement.value += text[index];
        index++;
      } else {
        isTyping = false;
      }
    } else {
      if (index > 0) {
        textElement.value = text.slice(0, index - 1);
        index--;
      } else {
        isTyping = true;
        textIndex = (textIndex + 1) % textArray.length;
      }
    }

    setTimeout(typeText, speed);
  }

  typeText();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.