JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="posts">
  <li class="post">
    <article>
      <header>This is my blogpost</header>
      <input type="text" class="hidden">
      <p>
        Hello! This is my very first post! I just want to say you "Hello world!"
      </p>
      <textarea class="hidden"></textarea>
    </article>
  </li>
  <li class="post">
    <article>
      <header>This is daily routine</header>
      <p>
        I just "EAT-CODE-SLEEP-REPEAT". All day long. All day long. All day long. All day long.
      </p>
    </article>
  </li>
</ul>

CSS

.post {
  display: block;
  margin: 10px;
  font-family: sans-serif;
}

.post article {
  background-color: white;
  padding: 10px;
}

.post header,
.post input {
  font-size: 30px;
  font-weight: 900;
  color: #577ca1;
}

.post p,
.post textarea {
  color: deeppink;
  width: 100%;
}

.hidden {
  display: none;
}

JavaScript

$('.post').on('click', 'header', function() {
  var oldHTML = $(this).html();
  $(this).addClass('hidden');
  $('header:hidden + input').removeClass('hidden').val(oldHTML);
});

$('.post').on('blur', 'header:hidden + input', function() {
  var newValue = $(this).val();
  $(this).addClass('hidden');
  $('header:hidden').removeClass('hidden').html(newValue);
});

$('.post').on('click', 'p', function() {
  var oldHTML = $(this).html();
  $(this).addClass('hidden');
  $('p:hidden + textarea').removeClass('hidden').html(oldHTML);
});

$('.post').on('blur', 'p:hidden + textarea', function() {
  var newValue = $(this).val();
  $(this).addClass('hidden');
  $('p:hidden').removeClass('hidden').html(newValue);
});