JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Contact List App</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <div class="header">
    
	    <div id="dropdown">
	       <div class="dropdown">
	          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
	          <span class="caret"></span></button>
	          <ul class="dropdown-menu">
	            <li><a href="#">All</a></li>
	            <li><a href="#">Work</a></li>
	            <li><a href="#">Family</a></li>
	          </ul>
	        </div> 
	    </div>

	    <div class="title">
	      <h2>All Contacts</h2>
	    </div>

	    <div class="button" id="addButton">
	      <p>
	        <a href="#">
	          <span class="glyphicon glyphicon-plus-sign" onclick="addNew()"></span>
	        </a>
	      </p>
	    </div>
    
  </div>

  <div id="search">
     <form>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form> 
  </div>


  <div id="contactlist" >
        
  </div>


  <div id="addnewcontact">
  
    
  </div>


  <div id="editcontact">
    
  </div>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

CSS

.header{
	display:flex;
}

.header>div{
	float: left;
}

.header .title{
	padding-left: 400px;
}

.header .dropdown{
	padding-top: 20px;
	padding-left: 20px;
}

.header .button{
	padding-left: 500px;
	padding-top: 5px;
}

.glyphicon-plus-sign{
	font-size: 50px;
}

#search form .input-group{
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 10px;
}

.input-group{
	padding-top: 20px;
}

.form-group{
	padding-left: 30px;
	padding-right: 30px;
}

form .btn-primary{
	margin-left: 30px;
}

JavaScript

var array = [];
function Person(fullName, number, group) {
        this.fullName = fullName;  
        this.number = number;
        this.group =  group;
        array.push(this);
}

Person.prototype.getFullName = function() {
    return this.fullName+' '+this.number+' '+this.group;
}

var p1 = new Person("Jonathan Buell",5804337551,"family");
var p2 = new Person("Patrick Daniel",8186934432,"work");

console.log(array);

/*
function save() {
    localStorage.setItem("array", JSON.stringify(array));
}


function submitToDb() {
    var person = new Person(nameInput.value, numberInput.value, groupInput.value);
   // refresh();
} 

var storedArray = JSON.parse(localStorage.getItem("array"));
function loadLocalStorage() {
    for(var i in storedArray){
        array[i] = storedArray[i]; 
    }
   // refresh(); 
}
loadLocalStorage();
*/

function showContacts() {
    for(var i in array){
        var id = i;
        contactlist.innerHTML +=
        `
        <ul>
        <div>
        <p>Name: `+ array[i].fullName +`</p>
        <p>Number: `+ array[i].number +`</p>
        <p>Group: `+ array[i].group +`</p>
        <button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
        <button type="button" class="btn btn-danger">Delete</button>
        </div>
        `
    }
}

showContacts();

function addNew() {
	document.getElementById("search").style.display = 'none';
	document.getElementById("contactlist").style.display = 'none';
	document.getElementById("editcontact").style.display = 'none';
	document.getElementById("addnewcontact").style.display = '';
	document.getElementById("addnewcontact").innerHTML = 
	`
	<form>
      <div class="form-group">
        <label for="inputName">Name</label>
        <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name">
      </div>
       <div class="form-group">
        <label for="inputNumber">Number</label>
        <input type="text"...