JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<div class="grid-container">
  <div class="row">
    <div id="red" class="col-2">
      hi
      <br/> hi
      <br/> hi
      <br/>

    </div>
    <div class="col-1 blue">
      d
    </div>
    <div class="col-2">
      hi
      <br/> hi
      <br/> hi
      <br/>

    </div>
  </div>
</div>

CSS

.grid-container {
    width: 100%;
    max-width: 1200px;
  }
  /*-- our cleafix hack -- */
  
  .row:before,
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  [class*='col-'] {
    float: left;
    min-height: 1px;
    width: 16.66%;
    /*-- our gutter -- */
    padding: 12px;
    background-color: #FFDCDC;
  }
  
  .col-1 {
    width: 16.66%;
  }
  
  .col-2 {
    width: 33.33%;
    height: 260px;
  }
  
  .col-3 {
    width: 50%;
  }
  
  .col-4 {
    width: 66.66%;
  }
  
  .col-5 {
    width: 83.33%;
  }
  
  .col-6 {
    width: 100%;
  }
  
  .outline,
  .outline * {
    outline: 1px solid #F6A1A1;
  }
  /*-- some extra column content styling --*/
  
  [class*='col-'] > p {
    background-color: #FFC2C2;
    padding: 0;
    margin: 0;
    text-align: center;
    color: white;
  }
  
  .col-1.blue {
    background-color: blue;
    height: 260px;
  }
}

JavaScript

var x = document.getElementsByClassName("col-1 blue");
x.addEventListener("mouseover", function() {
console.log("do something while hovering over blue...");
});