JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<h2>transform: rotate(20deg):</h2>
<div class="a">Hello World!</div>
<br>

<h2>transform: skewY(20deg):</h2>
<div>
	<div class="b">12</div>
	<div class="iron-post">
		
	</div>
</div>
<br>

<h2>transform: scaleY(1.5):</h2>
<div class="c">Hello World!</div>

CSS

div.a {
  width: 150px;
  height: 80px;
  background-color: yellow;
  -ms-transform: rotate(20deg); /* IE 9 */
  transform: rotate(20deg);
}

div.b {
  width: 80px;
  height: 80px;
	
  background-color: yellow;
  -ms-transform: skewY(40deg); /* IE 9 */
  transform: skewY(40deg);
	
	
	    width: 30px;
    height: 30px;
    background-color: red;
    -ms-transform: skewY(40deg);
    transform: rotate3d(4, 9, 1, 45deg);
    border-radius: 80px;
    color: white;
    font-size: 25px;
    text-align: center;
    -webkit-text-stroke: thick;
	
}
.iron-post {
	height: 40px;
    width: 4px;
    background-color: #c3c3c3;
    margin-left: 13px;
}

div.c {
  width: 150px;
  height: 80px;
  background-color: yellow;
  -ms-transform: scaleY(1.5); /* IE 9 */
  transform: scaleY(1.5);
}