<input type="text" id="title" placeholder="Введите заголовок">
<textarea name="" id="text" cols="30" rows="10" placeholder="Введите текст"></textarea>

<br>
Результат:
<br>

<div id="result"></div>

<br>
<br>

<textarea name="" id="code" cols="30" rows="10"></textarea>

input,
textarea {
  width: 100%;
  display: block;
  margin: 0.5rem 0;
}

document.querySelectorAll('input,textarea').forEach(el=>{
  el.addEventListener('input',()=>{
    const title = document.getElementById('title').value;
    const text = document.getElementById('text').value.split('\n').join('</p><p>');
    const result = `<section style="padding: 1em; border-left: 4px solid #d9a83a ; border-radius: 8px; background:rgb(252,246,230); color: #49390d; box-shadow:  0 2px 0 #efefef">
  <h2 style="margin-top: 0; text-transform:uppercase;">⚠ ${title}</h2>
 <p>${text}</p>
</section>`;
    
    document.getElementById('result').innerHTML = result;
    document.getElementById('code').value = result;

  });
});