JSFiddle - React, Tailwind, and code Playground

by erbsaag

HTML

<article id="target">
  <div>
    <div>
      <section>
        <div>
          <div>
            <div>
              <div>
                <p>
                  <span data-id="W0-40"
                    >Dünya
                    <mark
                      >genelinde tüm </mark
                    ><span
                      >araba yolculuklarının %40 kadarı 5 km altı mesafeler için
                      yapılıyor. Araba ile yapılan yolculuklarda
                      <mark
                        class="select-none pt-2 selection-transparent bg-blue"
                        data-augmentation="selection"
                        >harcanan yakıtın </mark
                      >ortalamada sadece %2'si yolcuları taşımak için
                      kullanılıyor. Ancak Scooterlar hem çevreci hem de
                      eğlenceli!
                    </span></span
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</article>

<template id="result">
  <article class="p-8 py-6 leading-relaxed font-light">
  <div>
    <div>
      <section data-stellar-background-ratio="0.3">
        <div>
          <div>
            <div data-wow-delay=".2s">
              <div>
                <p>
                  <span data-id="W0-40">Dünya
                    <span class="select-none selection-transparent pt-1 bg-brand-lighter" data-augmentation="highlight">genelinde tüm </span><span>araba yolculuklarının %40 kadarı 5 km altı mesafeler için
                      yapılıyor. Araba ile yapılan yolculuklarda
                      harcanan yakıtın ortalamada sadece %2'si yolcuları taşımak için
                      kullanılıyor. Ancak Scooterlar hem çevreci hem de
                      eğlenceli!
                    </span></span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</article>
</template>

CSS

.bg-blue {
    background-color: #accef7;
}

JavaScript

window.addEventListener("mousedown", (e) => {
			document.getElementById("target").replaceWith(
        document.getElementById("result").content
      );
  });