JSFiddle - React, Tailwind, and code Playground

by Piercy

HTML

<p>The user would expect <u>Header Class</u> to be red as they do not know anything about the content css.  In my code i am using bootstrap but this shows a simplified version of the issue.  Normally, you would just make the CSS more specific but because the user doesnt know about bootstrap (or in this example content) we can't really expect them to modify the CSS for us.</p>

<div class="content">
    <h1>Header 1</h1>
    
    <div id="Preview">
        <!-- Start Html Template -->
        <style>
            .header
            {
            color: red;
            }
        </style>
        <h1 class="header">Header Class</h1>
        <!-- End Html Template -->
    </div>
</div>

CSS

.content h1
{
    color: blue;
}