JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="one">this is the content for desktop</div>
    <div class="two">this is the content for tablet</div>
    <div class="three">this is the content for mobile</div>
</div>

CSS

@media all and (max-width: 959px) {

    .content .one{display:block;}
    .content .two{display:none;}
    .content .three{display:none;}

}

@media all and (max-width: 720px) {

    .content .one{display:none;}
    .content .two{display:block;}
    .content .three{display:none;}

}

@media all and (max-width: 479px) {

    .content .one{display:none;}
    .content .two{display:none;}
    .content .three{display:block;}

}