JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Regex challenge</h2>
<ul>
    <li>Match a string that ends with two numbers</li>
    <li>Match a string that does not contain lowercase letters</li>
    <li>Match a string starting with 'foo' or 'baz'</li>
    <li>Match a hexidecimal string</li>
</ul>
<ul id="results"></ul>

CSS

#results li.pass {
    color: green;
}
#results li.fail {
    color: red;
}

JavaScript

function match(str, str1, str2, str3) {
    return /[0-9]{2}$/.test(str) &&
           /^[^a-z]*$/.test(str1) &&
           /^(foo|baz)/.test(str2) &&
           /^0x[0-9A-Fa-f]$/.test(str3);
}

function assert(value, desc) {
    var li = document.createElement('li');
    li.className = value ? 'pass' : 'fail';
    li.appendChild(document.createTextNode(desc));
    document.getElementById('results').appendChild(li);
}

assert(match('adcd42', '0X123456789ABCDEF', 'foobar', '0xff46a9C8), 'First test works');
assert(!match('adcd4', '0X12345678a9ABCDEF', 'barfoo', '0xff4y6a9C8'), 'First test works');