JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
</body>
</html>

CSS

#div1
{
height: 200px;
width: 200px;
border: 1px solid black;
}
#div2
{
padding:50px;
border: 1px solid black;
background-color: red;
/*
-webkit-transform: rotate(45deg);
-webkit-transform: translateX(200px);
-moz-transform: rotate(45deg);
-moz-transform: translateX(200px);*/
-webkit-transform: rotate(45deg) translateX(200px);
-moz-transform: rotate(45deg) translateX(200px);
-webkit-transform-origin:0% 100%;
-moz-transform-origin:0% 100%;
}