JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="container-fluid">

  <div class='fContainer y100'>
  
    <div class="fItem x25 xm50 centerButton">
      <button class="solid">button</button>
    </div>
    <div class="fItem x25 xm50 centerButton">
      <button class="solid">button</button>
    </div>
    <div class="fItem x25 xm50 centerButton">
      <button class="solid">button</button>
    </div>
    <div class="fItem x25 xm50 centerButton">
      <button class="solid">button</button>
    </div>
    
    
  </div>
  

</div>

CSS

.container-fluid{width:calc(100vw - 16px)} 
body, html {height: 100vh}

/* ------------------------------------ fix sn */

.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-2,
.container-fluid .col-sm-2,
.container-fluid .col-md-2,
.container-fluid .col-lg-2,
.container-fluid .col-xs-3,
.container-fluid .col-sm-3,
.container-fluid .col-md-3,
.container-fluid .col-lg-3,
.container-fluid .col-xs-4,
.container-fluid .col-sm-4,
.container-fluid .col-md-4,
.container-fluid .col-lg-4,
.container-fluid .col-xs-5,
.container-fluid .col-sm-5,
.container-fluid .col-md-5,
.container-fluid .col-lg-5,
.container-fluid .col-xs-6,
.container-fluid .col-sm-6,
.container-fluid .col-md-6,
.container-fluid .col-lg-6,
.container-fluid .col-xs-7,
.container-fluid .col-sm-7,
.container-fluid .col-md-7,
.container-fluid .col-lg-7,
.container-fluid .col-xs-8,
.container-fluid .col-sm-8,
.container-fluid .col-md-8,
.container-fluid .col-lg-8,
.container-fluid .col-xs-9,
.container-fluid .col-sm-9,
.container-fluid .col-md-9,
.container-fluid .col-lg-9,
.container-fluid .col-xs-10,
.container-fluid .col-sm-10,
.container-fluid .col-md-10,
.container-fluid .col-lg-10,
.container-fluid .col-xs-11,
.container-fluid .col-sm-11,
.container-fluid .col-md-11,
.container-fluid .col-lg-11,
.container-fluid .col-xs-12,
.container-fluid .col-sm-12,
.container-fluid .col-md-12,
.container-fluid .col-lg-12 {
    padding-left: 0;
    padding-right: 0;
}


a {cursor: pointer;}
a:active {opacity: .8;}

/* ----------------------------------- page spacing */
.break5 {display: block; height: 5px;}
.break10 {display: block; height: 10px;}
.break15 {display: block; height: 15px;}
.break20 {display: block; height: 20px;}
.break40 {display: block; height: 40px;}
.break60 {display: block; height:...