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'),
        len = articles.length,
        article,
        switcher = " \
            <div class='switchers'> \
                <span data-color='blue'></span> \
                <span data-color='red'></span> \
                <span data-color='black'></span> \
            </div>";
    
    for(var i=0; i<len; i++) {
        article = articles[i];     
        article.innerHTML+= switcher;
    }
    
    var colorSwitchers = document.querySelectorAll('.switchers'),
        colorSwitchersLen = colorSwitchers.length;
    
    for(var x=0; x<colorSwitchersLen; x++) {
        colorSwitchers[x].addEventListener('click', function(e) {            
            if(e.target.nodeName === "SPAN") {
                this.parentNode.style.color = e.target.getAttribute('data-color');
            }
        }, false);
    }      
})();