JSFiddle - React, Tailwind, and code Playground

by Elena Lembersky

HTML

<main class="main">
  <section class="s__ch-holder">
    <article id="s__ch-item" class="s__ch-item s__ch-coll">
      <div class="s__td bg_yellow">One</div>
      <div class="s__td bg_green">Two<br/>Two</div>
      <div class="s__td bg_blue">Three<br/>Three<br/>Three</div>     
    </article> 
  </section>  
  <button class="chng-btn" type="button">Row to coll</button>
  <button class="chng-btn" type="button">Vertical to middle</button>
  <button class="chng-btn" type="button">Reverse</button>
</main>

SCSS

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
html {
    height: 100%;    
}
body{
    margin: 0; 
    padding: 0;
    background: #F4F4F4;    
    font-family: 'Lato', sans-serif;    
    font-size: 14px;
    color: #545454; 
    position: relative; 
}

*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
button {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    outline: none;
    border: 0;
}

p{
    font-size: 16px;    
    color: #7a7a7a; 
    line-height: 1.4;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    padding: 0;
}
table td{
    vertical-align: middle;
    padding: 0;
    border: 0;
}
*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
textarea { overflow: auto; }
ul {
    list-style: none outside none;
    padding: 0;
}
a{  
    text-decoration:none;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease;
    outline: none;      
}
img {
    max-width: 100%; 
    height:auto;
    border:0;
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease; 
    -moz-transition: all 0.8s...

JavaScript

document.getElementsByTagName('button')[0].onclick = function () {
	var _wrapper = document.getElementById('s__ch-item');
	if(_wrapper.classList.contains( 's__ch-coll')) {
		_wrapper.classList.remove('s__ch-coll');
	} else {
		_wrapper.classList.add('s__ch-coll');
	}
}
document.getElementsByTagName('button')[1].onclick = function () {
	var _wrapper = document.getElementById('s__ch-item');
	if(_wrapper.classList.contains( 's__ch-mdl')) {
		_wrapper.classList.remove('s__ch-mdl');
	} else {
		_wrapper.classList.add('s__ch-mdl');
	}
}