JSFiddle - React, Tailwind, and code Playground

by Ananth Arumugasamy

HTML

<h1 id="head"> Lorem Ipsum </h1>

<div id="div1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
<br>
    <br>
<div id="div2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
        
        <div id="div3"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
        
        
        <div id="div4"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
 <br>
     <br>
         <br><br>
             <br>
                 <br>
     
        
         <div id="div5"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
   <br>
       <br>
                     
                     
                      <div id="div6"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

CSS

h1{
    color:red;
    text-shadow:10px 10px 5px green;
}

#div1{
    border:solid;
    background:yellow;
    box-shadow:10px 10px 5px red;
}

#div2{
    border:solid;
    font-stretch:condensed;
    font-weight:200;  
    transform:translate(50px,50px);
      
}
#div3{
    transform:rotate(50deg);
}

#div4{
    border:solid;
   transform:scale(2,3);
}

#div5{
    border:solid;
   transform:skew(20deg,10deg);
}

#div4{
    border:solid;
    transform:scale(2,3);
}

#div6{
    border:solid;
    transform:rotateZ(120deg);
}