JSFiddle - React, Tailwind, and code Playground

by Wendell Christian

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">



    <div class="row" id="valoresDados">
        <div class="col-12 col-sm-12 col-md-12 mt-2 mb-2">
          <a href="#info1-editar" onclick="darfocus(this)" id="focus-senha" class="editar-dados"><i class="fas fa-pen-square"></i></a>
          <strong> Senha:</strong> *******</div>
      <div class="col-12 col-sm-12 col-md-3 float-left mt-2 mb-2">
        <a href="#info1-editar" onclick="darfocus(this)" id="focus-telefone" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Telefone:</strong> (62) 3232-0000
      </div>
      <div class="col-12 col-sm-12 col-md-4 float-left mt-2 mb-2">
        <a href="#info1-editar" onclick="darfocus(this)" id="focus-telefone2" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Celular:</strong> (62) 98199-3558
      </div>
      <div class="col-12 col-sm-12 col-md-5 float-left mt-2 mb-2">
        <a href="#info1-editar" onclick="darfocus(this)" id="focus-cep" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Cep:</strong> 00000-000
      </div>
    </div>
    
    <div class="row" id="editarDados">
      
      <div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>

      <div class="col-12 col-sm-12 col-md-12 float-left">Teste</div>
       
<div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>

      <div class="col-12 col-sm-12 col-md-12 float-left">Teste2</div>
      <div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>
      
      
        <div id="info1-editar"></div>
     ...

JavaScript

$( document ).ready(function() {
$("#editarDados").hide();
})

function darfocus(el){
  var id = '';
  var $doc = $('html, body');
  id = (el.id);
  id = id.replace("focus-", "");
  $("#editarDados").show("slow");
  $("#valoresDados").hide("slow");
  $('#' + id).focus();
  $doc.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
}