JSFiddle - React, Tailwind, and code Playground

by Jerreck

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">
    <div id="bootstrap">
        <h1>Header 1</h1>
        <h2>An example of styles using bootstrap.</h2>
        <h3 class="text-muted">It's not pretty, but it works.</h3>
        <a href="#" class="btn btn-primary">Button</a>
        <br></br>
        <p>Notice how the markup in this div is not inheriting from the user's custom CSS.</p>
    </div>
    <hr></hr>
    <div id="Preview">
        <!-- Start Html Template -->
        <style>
            .user > h1 {color: red;}
            .user > h2 {color: blue;}
            .user > h3 {font-size: 40px;}
            .user > .btn {margin-top: 24px; background-color: red;}
        </style>
        <div class="user">
        <h1>Header 1</h1>
        <h2>An example of styles NOT using bootstrap.</h2>
        <h3 class="text-muted">It's a bit more work, but it gets the job done</h3>
        <p>Notice how the user's markup has the same classes as bootstrap, but they're not inheriting from it.</p>
        <a href="#" class="btn btn-primary">Button.</a>
        <!-- End Html Template -->
    </div>
</div>

CSS

#bootstrap {
  /*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

  /*! normalize.css v2.1.0 | MIT License | git.io/normalize */

}
#bootstrap article,
#bootstrap aside,
#bootstrap details,
#bootstrap figcaption,
#bootstrap figure,
#bootstrap footer,
#bootstrap header,
#bootstrap hgroup,
#bootstrap main,
#bootstrap nav,
#bootstrap section,
#bootstrap summary {
  display: block;
}
#bootstrap audio,
#bootstrap canvas,
#bootstrap video {
  display: inline-block;
}
#bootstrap audio:not([controls]) {
  display: none;
  height: 0;
}
#bootstrap [hidden] {
  display: none;
}
#bootstrap html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
#bootstrap body {
  margin: 0;
}
#bootstrap a:focus {
  outline: thin dotted;
}
#bootstrap a:active,
#bootstrap a:hover {
  outline: 0;
}
#bootstrap h1 {
  margin: 0.67em 0;
  font-size: 2em;
}
#bootstrap abbr[title] {
  border-bottom: 1px dotted;
}
#bootstrap b,
#bootstrap strong {
  font-weight: bold;
}
#bootstrap dfn {
  font-style: italic;
}
#bootstrap hr {
  height: 0;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
#bootstrap mark {
  color: #000;
  background: #ff0;
}
#bootstrap code,
#bootstrap kbd,
#bootstrap pre,
#bootstrap samp {
  font-family: monospace, serif;
  font-size: 1em;
}
#bootstrap pre {
  white-space: pre-wrap;
}
#bootstrap q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
#bootstrap small {
  font-size: 80%;
}
#bootstrap sub,
#bootstrap sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
#bootstrap sup {
  top: -0.5em;
}
#bootstrap sub {
  bottom: -0.25em;
}
#bootstrap img {
  border: 0;
}
#bootstrap svg:not(:root) {
  overflow: hidden;
}
#bootstrap figure {
  margin: 0;
}
#bootstrap fieldset {
  padding: 0.35em 0.625em 0.75em;
  margin: 0...