JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<picture>
 <source srcset="https://placehold.it/900x150" media="(min-width: 900px)">
 <source srcset="https://placehold.it/800x150" media="(min-width: 800px)">
 <source srcset="https://placehold.it/700x150" media="(min-width: 700px)">
 <source srcset="https://placehold.it/600x150" media="(min-width: 600px)">
 <source srcset="https://placehold.it/500x150" media="(min-width: 500px)">
 <source srcset="https://placehold.it/400x150" media="(min-width: 400px)">
 <source srcset="https://placehold.it/300x150" media="(min-width: 300px)">
 <source srcset="https://placehold.it/200x150" media="(min-width: 200px)">
 <img src="https://placehold.it/100x100" alt="MDN">
</picture>
<div class="image"></div>

CSS

/* For width smaller than 400px: */

.image {
    background-image: url("https://placehold.it/100x100"); 
    width:100px;
    height:100px;
}
@media only screen and (min-width: 200px) {
    .image { 
        background-image: url("https://placehold.it/200x150"); 
        width:200px;
        height:150px;
    }
}
@media only screen and (min-width: 300px) {
    .image { 
        background-image: url("https://placehold.it/300x150"); 
        width:300px;
        height:150px;
    }
}
@media only screen and (min-width: 400px) {
    .image { 
        background-image: url("https://placehold.it/400x150"); 
        width:400px;
        height:150px;
    }
}@media only screen and (min-width: 500px) {
    .image { 
        background-image: url("https://placehold.it/500x150"); 
        width:500px;
        height:150px;
    }
}
@media only screen and (min-width: 600px) {
    .image { 
        background-image: url("https://placehold.it/600x150"); 
        width:600px;
        height:150px;
    }
}
@media only screen and (min-width: 700px) {
    .image { 
        background-image: url("https://placehold.it/700x150"); 
        width:700px;
        height:150px;
    }
}
@media only screen and (min-width: 800px) {
    .image { 
        background-image: url("https://placehold.it/800x150"); 
        width:800px;
        height:150px;
    }
}
@media only screen and (min-width: 900px) {
    .image { 
        background-image: url("https://placehold.it/900x150"); 
        width:900px;
        height:150px;
    }
}