JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="title" class="pad5" style="display:none;">STREET NAME</div>
  <div>
    <input id="street" type="text" value="street" class="pad5" onfocus="focused()" onblur="blured()">
  </div>
  <br>
  <div>
    <input type="button" value="Save" class="pad30" onclick="showstreet()">
  </div>
</body>

CSS

.pad5 {
  padding: 5px;
}

.pad30 {
  padding: 30px;
}

JavaScript

function showstreet() {
  var x = document.getElementById('street').value;
  alert(x);
}

function focused() {
  document.getElementById('title').style.display = '';
  document.getElementById('street').value = '';
}

function blured() {
  document.getElementById('title').style.display = 'none';
  if (document.getElementById('street').value == '') {
    document.getElementById('street').value = 'street';
  }
}