JSFiddle - React, Tailwind, and code Playground

HTML

<div class="phone">visible on: phone</div>
<div class="tablet">visible on: tablet</div>
<div class="phone tablet">visible on: phone and tablet</div>

CSS

@media not screen and (max-width: 420px) {
  	.phone:not(.tablet) {
    	display: none;
	} 
}
@media not screen and (min-width: 421px) and (max-width: 992px) {
  	.tablet:not(.phone) {
    	display: none; 
	} 
}