JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example-one">
<style>
  .example-one { margin-bottom: 10px; padding: 10px; outline: 2px dashed #999; background: yellow; text-align: center; font: 18px Arial; }
  .example-one:hover { outline: 2px dashed #0090D2; background: #eee; font-weight: bold; }
</style>
<p><code>scoped</code> attribute in <code>&lt;style></code> element.</p>
</div>
<div class="example-one">Outside scope</div>

JavaScript

/*

With <style scope> as a child of the first <div class="example-one">, only that DIV gets styled, because the "scope" attribute applies only that specific <div class="example-one"> DIV.

But if you remove the attribute "scope" from the <style> tag, the <style> then acts as a global, "unscoped" <style> element making the second <div class="example-one"> DIV use the styles of that "unscoped" <style> element.

*/