JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

Window width : <span id="width">asdasd</span>
Window height : <span id="height"></span>
<br><br>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

#width,#height
{
    background-color:red;
    color:#FFF;
    font-weight:bolder;
    padding:3px;
}

.container
{
    padding:2%;
    background-color:aqua;
}

.box
{
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block;
    -webkit-transition:width 1s; /* For Safari 3.1 to 6.0 */
     transition:width 1s;
}

JavaScript

$( document ).ready(function() {
     var width =  $(window).width();
     var height = $(window).height()
     $("#width").html(width);
     $('#height').html(height);
    
     if(width <= 300)
    {
        $('.box').css('width','100%');
    }
    
    if(width > 300 && width <600)
    {
        $('.box').css('width','48%');
    }
    
    if(width >= 600)
    {
        $('.box').css('width','33%');
    }
});

$(window).on('resize', function(){
     var width =  $(window).width();
     var height = $(window).height()
     $("#width").html(width);
     $('#height').html(height);
    
    if(width <= 300)
    {
        $('.box').css('width','100%');
    }
    
    if(width > 300 && width <600)
    {
        $('.box').css('width','48%');
    }
    
    if(width >= 600)
    {
        $('.box').css('width','30%');
    }
});