Coder Wrap provides free to use snippets

* {
 box-sizing: border-box;
}

body {
	margin: 0px;
 font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.store-loctore {
 max-width: 1200px;
 width: 100%;
 margin: auto;
}
.store-loctore h2 {
	text-align: center;
	font-size: 30px;
}
.loctore-form {
 width: 100%;
 max-width: 400px;
 margin: 20px auto;
 padding:0 15px; 
}

.loctore-form input {
 font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 font-size: 16px;
 width: 100%;
 padding: 10px 15px;
 outline: none;
 line-height: normal;
 border: #ccc 1px solid;
 font-size: 16px;
 font-family: 'Poppins';
 transition: 0.5s all;
 display: inline-block;
}

.locate-list {
 display: flex;
 flex-flow: row wrap;
 width: calc(100% + 30px);
 margin-left: -15px;
}

.locate-list .locate-item {
 width: calc(33.33% - 30px);
 margin: 15px;
 padding: 20px 20px 10px 20px;
 min-height: 150px;
 background-color: #fff;
 box-shadow: 0 10px 30px rgba(65, 72, 86, 0.08);
}

.storepoint-name {
 font-size: 18px;
 font-weight: 600;
}

.locate-list .locate-item a {
 color: #4c4c4c;
 text-decoration: none;
}

.locate-list .locate-item .storepoint-address {
 width: 100%;
 display: block;
 margin: 7px 0px;
}
.datanofound {
 width: 100%;
 text-align: center;
 display: none;
 font-weight: 400;
 color: #000;
 font-size: 18px;
 padding: 20px 0;
}
@media(max-width: 992px) {
	.locate-list .locate-item {
 width: calc(50% - 30px);
}
}
@media(max-width: 599px) {
	.store-loctore h2{
		font-size: 22px;
	}
	.locate-list {
		width: 100%; 
		margin: 0px; 
		padding:20px 15px;
	}
	.locate-list .locate-item {
 width: 100%;
 padding: 20px;
 margin:10px 0px;
 min-height: inherit;

}
}

document.addEventListener('DOMContentLoaded', function() {
	const searchInput = document.getElementById('searchloctore');
	 const searchItems = document.querySelectorAll('.locate-list .locate-item');
	 const noResultsDiv = document.querySelector('.datanofound');
	 let foundResults = false;
	 searchInput.addEventListener('input', function() {
   const searchTerm = searchInput.value.toLowerCase().trim();
   foundResults = false;
   searchItems.forEach(item => {
     const storepointAddress = item.querySelector('.storepoint-address').textContent.toLowerCase();
     const storepointname = item.querySelector('.storepoint-name').textContent.toLowerCase();
     if (searchTerm === '') {
       item.style.display = 'block'; 
     } else if (storepointAddress.includes(searchTerm) || storepointname.includes(searchTerm)) {
       item.style.display = 'block';
       foundResults = true;
     } else {
       item.style.display = 'none';
     }
  });
   if (foundResults) {
        noResultsDiv.style.display = 'none';
    } else {
        noResultsDiv.style.display = 'block';
    }
 });
});