JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<div class="wrapper">
  <div class="inner-wrapper">
    <div class="drow">
      <p>Hello World</p>
    </div>
    <div class="drow">
      <p>Hello World</p>
    </div>
    <div class="drow drowhalf">
      <p>Hello World</p><p>Hello World</p>
    </div>
    <div class="drow drowhalf">
      <p>Hello World</p><p>Hello World</p>
    </div>
    <div class="drow">
      <p>Hello World</p>
    </div>
    <div class="drow">
      <p>Hello World</p>
    </div>
  </div>
</div>

CSS

html,
 body {
   margin: 0;
   padding: 0;
 }
 
 html,
 body,
 .wrapper,
 .inner-wrapper {
   height: 100%;
 }
 
 body {
   background: #e5e5e5;
 }
 
 p {
   margin: 0;
 }
 
 .wrapper {
   overflow: hidden;
 }
 
 .inner-wrapper {
   transform: rotate(-45deg) translateX(-50%);
   transform-origin: top left;
   text-align: center;
   width: 200%;
 }
 
 .drow {
   height: 100px;
   line-height: 100px;
   color: #fff;
   background: rgba(0, 0, 0, 1);
 }
 
 .drowhalf p {
   display: inline-block;
   width: 50%;
 }

JavaScript

function stretch(){
	var $wrapper = $('.wrapper'),
  		diagonal = Math.ceil(Math.sqrt(Math.pow($wrapper.width(),2) + Math.pow($wrapper.height(),2))),
      height = diagonal / $wrapper.find('.inner-wrapper .drow').length;        
      $wrapper.find('.inner-wrapper .drow').height(height).css('line-height', height + 'px'); 
}

$(document).ready(function(){
	stretch();
});


$( window ).resize(function(){
	stretch();
});