JSFiddle - React, Tailwind, and code Playground

by syedgakbar

HTML

<div id="content_wrapper">
    CSS @media queries explorer. Resize page to see the effect.
    <div id="product"></div>
</div>

CSS

@media screen 
{
    body
    {
        background: rgb(255,255,136);
    }
    
    #content_wrapper
    {
        text-align:center;
        font-weight:bold;
        font-size:18px;
        padding:15px;
        width:80%;
        min-height:200px;
        margin:20px auto;
        background: white;
        border: 8px solid transparent;
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 0 8px rgba(0,0,0,0.3);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding-box;
        background-clip: padding-box;
    }
    
    #product
    {
        background: url('http://images.paultan.org/uploads/2006/05/yaris_color_5.jpg') no-repeat center center;
        width:100%;
        height:300px;
    }
}
@media screen and (max-width: 1300px)
{
    body
    {
        background-color:rgb(135,224,253);
    }
    
    #product
    {
        background: url('http://images.paultan.org/uploads/2006/05/yaris_color_7.jpg') no-repeat center center;
    }
}
@media screen and (max-width: 1200px)
{
    body
    {
        background-color:rgb(180,221,180);
    }
    
    #product
    {
        background: url('http://images.paultan.org/uploads/2006/05/yaris_color_6.jpg') no-repeat center center;
    }
}
@media screen and (max-width: 1000px)
{
    body
    {
        background-color:rgb(240,183,161);
    }
    
    #product
    {
        background: url('http://images.paultan.org/uploads/2006/05/yaris_color_4.jpg') no-repeat center center;
    }
}
@media screen and (max-width: 800px)
{
    body
    {
        background-color:rgb(182,224,38);
        
    }
    
    #product
    {
        background: url('http://images.paultan.org/uploads/2006/05/yaris_color_3.jpg') no-repeat center center;
    }
}
@media screen and (max-width: 600px)
{
    body
    {
        background-color:rgb(184,198,223);
    }
    
    #product
    {
        background:...

JavaScript

// By: Syed Ghulam Akbar