JSFiddle - React, Tailwind, and code Playground

by richardneililagan

HTML

<div id="container">
    <div id="box">This is my text This is my text This is my text This is my text </div>
</div>

CSS

#container
{
    padding:100px;
}

#box
{
    width:150px;
    height:150px;
    padding:20px;
    border:1px solid #000000;

    -ms-transform-origin: 100% 0%;  
    -webkit-transform-origin: 100% 0%;  
    -o-transform-origin: 100% 0%;  
    -moz-transform-origin: 100% 0%;  
    transform-origin: 100% 0%;     

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;    
}

#box:hover
{
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    transform: rotate(30deg);
}

JavaScript

/*
$('#box').hover(
    function () {
        $(this).addClass('selected');
    },
    function () {
        $(this).removeClass('selected');
    }
);
*/