JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Callback Functions!</h1>
    <h3>Siblings:</h3>
    <ul class="siblings"></ul>
    <script src="./sandbox.js"></script>
</body>
</html>

JavaScript

//get a refrence to the 'ul
const ul = document.querySelector('.siblings');

const siblings = ['negar', 'behnam', 'vahid','vici', 'omid', 'negin','behnood'];

let html = ``;
siblings.forEach(person => {
    //create html template
html += `<li style="color: purple">${person}</li>`;
})

console.log(html);
ul.innerHTML = html;