JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Device Profiles</title>
</head>

<body>

<h1>Profile</h1>

</body>
</html>

CSS

@media (min-width: 0) and (max-width: 640px) {
    h1::before {content: 'Phone ';}
}
@media (min-width: 641px) and (max-width: 991px) {
    h1::before {content: 'Tablet ';}
}
@media (min-width: 992px) {
    h1::before {content: 'Desktop ';}
}