JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>space foo</title>
        <meta charset=utf-8>
        <style>
            #\ foo{background:#f00;}
            #\ oof{background:#00f;}
            #hello\ world{background:#0f0;}
            :target{border:1px dashed #000;color:#fff}
        </style>
    </head>
    <body>
        <p id=" foo">your mother is a hamster</p>
        <p id=" oof">and your father etc</p>
        <p id="hello world">hello world</p> 
        <p><a href="#%20foo">first</a></p>
        <p><a href="#%20oof">second</a></p>
        <p><a href="#hello%20world">third</a></p> 
        <script>
            document.write('<p>"' + document.getElementById(' foo').id + '"</p>');
             document.write('<p>"' + document.getElementById('hello world').id + '"</p>'); 
        </script>
    </body>
</html>