JSFiddle - React, Tailwind, and code Playground

by Mikael Roos

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<img src="http://www.gravatar.com/avatar/d1e65e60a2a3b9ef7c94a86374dde46c.jpg">
<img src="http://dbwebb.se/image/tema/trad/blad.jpg">

<p>This is a paragraph with also can use the plugin.</p>

CSS

.modify {
    transform: skew(30deg);
}

JavaScript

/*
$("img").click(function() {
    $(this).toggleClass("modify");    
});
*/

// Define the plugin by extending the $ object
$.fn.skewit = function(options) {
    
    // Loop through all elements that uses it
    return this.each(function() {
        
        // Here comes the implementation 
        $(this).click(function() {
            $(this).toggleClass("modify");    
        });
        
    });
    
};

// Use the plugin
$("img").skewit();
$("p").skewit();