JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<main class="main">
    <section class="section">
        <article class="section__article">
            <h2> Article 1 </h2> 
            <p> Credibly visualize professional e-markets for viral platforms. Progressively utilize flexible bandwidth for high standards in human capital. Continually exploit best-of-breed portals and team. Uniquely promote integrated ROI without strategic supply chains. Efficiently coordinate technically sound processes without viral solutions. Dynamically administrate focused core competencies after interoperable. </p>
        </article>
        <article class="section__article">
            <h2> Article 2 </h2> 
            <p> Dynamically actualize bleeding-edge models with intermandated niche markets. Rapidiously customize magnetic experiences after compelling infrastructures. Interactively enable error-free meta-services whereas user-centric portals. Seamlessly. Credibly maintain backend action items vis-a-vis functional testing procedures. Dynamically visualize empowered systems after real-time web-readiness. Completely scale inexpensive imperatives before transparent functionalities. </p>
        </article>    
        <article class="section__article">
            <h2> Article 3 </h2> 
            <p> Uniquely create extensible partnerships vis-a-vis progressive schemas. Credibly synthesize future-proof manufactured products via visionary mindshare. Competently leverage existing economically sound synergy without multidisciplinary. Efficiently exploit empowered alignments without backend scenarios. Collaboratively syndicate reliable bandwidth vis-a-vis pandemic leadership. Continually expedite parallel mindshare without leveraged initiatives. Energistically supply. </p>
                
        </article>     
    </section>
</main>

CSS

* { 
    box-sizing:border-box;       
}

body {
    font-size:14px;
}

.main { 
    display:table;    
}

.section { 
    background:black;    
    padding:1em 0 1em 1em;       
    display:table;   
}

.section__article {   
    display:table-cell;   
    background:#fff;   
    width:33.3333%;       
    border-right:1em black solid; 
    position:relative;
    padding:1em 1em 2em 1em;
}

.switchers {
   position:absolute;
   right:1em;
   bottom:0.2em;
}

.switchers span {
    display:inline-block;
    width:15px;
    height:15px;
    border:1px black solid;
}

[data-color='blue'] {    
    background-color: blue;
}

[data-color='red'] {    
    background-color: red;
}

[data-color='black'] {    
    background-color: black;
}

Babel + JSX

(function () {

	const articles = document.querySelectorAll('.section__article');
  const switcher = 
  	'<div class="switchers">' + 
        '<span data-color="blue"></span>' + 
        '<span data-color="red"></span>' + 
        '<span data-color="black"></span>' + 
    '</div>';
  
  const appendSwitcher = (article, index) => {
  	article.innerHTML += switcher;
    article.querySelector('.switchers').addEventListener('click', (e) => {
    	let switcher = e.target;
    	if(switcher.nodeName === "SPAN") {
         switcher.parentNode.parentNode.style.color = switcher.getAttribute('data-color');
      }
    });
  };
  
  [].forEach.call(articles, appendSwitcher);
})();