JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<div>
  <p>P1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet odio culpa veritatis, eaque porro quam perferendis cumque minus. Architecto fugiat unde, voluptas aut inventore molestias ducimus, a rem quo repellat.</p>
  
    <p>P2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet odio culpa veritatis, eaque porro quam perferendis cumque minus. Architecto fugiat unde, voluptas aut inventore molestias ducimus, a rem quo repellat.</p>
    
      <p>P3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet odio culpa veritatis, eaque porro quam perferendis cumque minus. Architecto fugiat unde, voluptas aut inventore molestias ducimus, a rem quo repellat.</p>
      
        <p>P4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet odio culpa veritatis, eaque porro quam perferendis cumque minus. Architecto fugiat unde, voluptas aut inventore molestias ducimus, a rem quo repellat.</p>
        
          <p>P5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet odio culpa veritatis, eaque porro quam perferendis cumque minus. Architecto fugiat unde, voluptas aut inventore molestias ducimus, a rem quo repellat.</p>
          
            <p>P6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet odio culpa veritatis, eaque porro quam perferendis cumque minus. Architecto fugiat unde, voluptas aut inventore molestias ducimus, a rem quo repellat.</p>
  
</div>

CSS

div p {
  width: 33%;
  float: left;
}

JavaScript

function init() {
	var pList = document.getElementsByTagName("p");
  console.log(pList);
  for	(var i=0;i<pList.length;i++) {
  	pList[i].onclick = addColor
  }
}

function addColor(e) {
	e.target.style.background = "red";
  e.target.onclick = removeColor;
}

function removeColor(e) {
	e.target.style.background = "";
  e.target.onclick = addColor;
}

window.onload = init;