JSFiddle - React, Tailwind, and code Playground

by Alexey

HTML

<table cellspacing='0' cellpadding='0'>
	<tr>
		<td>&nbsp;</td>
		<td class='blue'>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td class='red'>&nbsp;</td>
		<td>&nbsp;</td>
		<td class='lightblue'>&nbsp;</td>
	</tr>
	<tr>
		<td class='orange'>&nbsp;</td>
		<td class='yellow'>&nbsp;</td>
		<td class='green'>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td class='lightgreen'>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>

CSS

table{
	transform: rotate(30deg)
				skew(-30deg);
    
    -webkit-transform: rotate(45deg)
				skew(-45deg);
    
	margin: 0px auto;
}

table td{
	width:150px;
	height:150px;
/*border:1px solid black;*/

	text-transform: skew(35deg);
}

.red{background: linear-gradient(45deg, #D7562B 50%,#E15A2C 50%);}
.orange{background: linear-gradient(45deg, #EBA411 50%,#F6AB11 50%);}
.yellow{background: linear-gradient(45deg, #F3CA00 50%,#FED300 50%);}
.green{background: linear-gradient(45deg, #5FA632 50%,#63AD33 50%);}
.lightgreen{background: linear-gradient(45deg, #B8C31A 50%,#C0CC1B 50%);}
.blue{background: linear-gradient(45deg, #0074BB 50%,#0079C0 50%);}
.lightblue{background: linear-gradient(45deg, #00ABDB 50%,#00B3E1 50%);}