JSFiddle - React, Tailwind, and code Playground

by basarat

HTML

<ul class="thumbnails" id="list">
    <li class="span4"> <a href="#" class="thumbnail">
        <img src="http://placehold.it/360x270" alt=""/>
                          </a>

    </li>
    <li class="span3"> <a href="#" class="thumbnail">
                              <img src="http://placehold.it/260x120" alt=""/>
                          </a>

    </li>
    <li class="span2"> <a href="#" class="thumbnail">
                              <img src="http://placehold.it/160x120" alt=""/>
                          </a>

    </li>
    <li class="span3"> <a href="#" class="thumbnail">
                              <img src="http://placehold.it/260x120" alt=""/>
                          </a>

    </li>
    <li class="span2"> <a href="#" class="thumbnail">
                              <img src="http://placehold.it/160x120" alt=""/>
                          </a>

    </li>
    <li class="span3"> <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt=""/>
                          </a>

    </li>
    <li class="span2"> <a href="#" class="thumbnail">
                              <img src="http://placehold.it/160x120" alt=""/>
                          </a>

    </li>
    <li class="span3"> <a href="#" class="thumbnail">
                              <img src="http://placehold.it/260x120" alt=""/>
                          </a>

    </li>
    <li class="span2"> <a href="#" class="thumbnail">
                              <img src="http://placehold.it/160x120" alt=""/>
                          </a>

    </li>
    <li class="span3"> <a href="#" class="thumbnail">
                              <img src="http://placehold.it/260x120" alt="" />
                          </a>

    </li>
    <li class="span2"> <a href="#" class="thumbnail">
                              <img src="http://placehold.it/160x120" alt="" />
                          </a>

    </li>
    <li class="span2"> <a href="#" class="thumbnail">
                              <img...

CSS

.span4 {
    width: 300px;
}
.span3 {
    width: 220px;
}
.span2 {
    width: 140px;
}

JavaScript

$(function () {

    $.fn.shuffle = function () {        
        
         alert("hey");
        

    };
    
       $('#list li img').shuffle();
    

});