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;
}

JavaScript

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