JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<div class="rounded-corners">
    <p>This container should be slightly rotated in browsers that support it.</p>
</div>

CSS

body {
    background: #eee;
    text-align:center;
    font-family: Verdana, sans-serif;
}

div.rounded-corners {
    background:#34E1F7;
    width:200px; 
    margin:100px auto;
    padding:20px;
    color:#fff;
    
    /* CSS3 Rotation Rules */
    transform: rotate(15deg);
    -ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Safari and Chrome */
    -o-transform: rotate(15deg); /* Opera */
    -moz-transform: rotate(15deg); /* Firefox */
}