JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<div id="wrapper">
    <div class="surrounding-content">
      before
    </div>

    <div id="content-to-scale">
      <div>something inside</div>
      <div><img src="http://placekitten.com/g/150/100"></div>
      <div>another something</div>
    </div>

    <div class="surrounding-content">
      after
    </div>
  </div>

CSS

div{border: thin solid black;}
#wrapper{
    display:-webkit-flex;
    -webkit-flex-direction:column;
    height:auto;
   
}
#content-to-scale {
  font-size: 1.1em;
    display:-webkit-flex;
    -webkit-flex-direction: column;
    width:300px;
    text-align:center;
    margin:0 auto;

    -webkit-perspective-origin: 1% 1%;
    -webkit-transform:rotate(50deg);
    /*        -webkit-transform:scale(2,2);
    
    -webkit-transform:translate(100px,100px);*/

}
#content-to-scale div{
    width:250px
    padding:5px;
    margin:5px;
}

/* creating transforms */

JavaScript

$(function(){
    console.log($('#content-to-scale').css('height'));
    console.log($('#content-to-scale'));
        console.log($('#wrapper').css('height'));
    function ap(){
        $('<div>what </div>').appendTo('#wrapper');
    }
    ap();
});