JSFiddle - React, Tailwind, and code Playground

HTML

<body style="">
<h1>Title</h1>
<div class="container"> things </div>
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</body>

CSS

body > div.alert { border: 5px solid }
body > div:nth-of-type(1) { background-color: cyan; }
body > div:nth-of-type(2) { background-color: lime; }
body > div:nth-of-type(3) { background-color: pink; }
body > div.alert:nth-of-type(1) { border-color: blue; }
body > div.alert:nth-of-type(2) { border-color: green; }
body > div.alert:nth-of-type(3) { border-color: red; }
body > .alert:nth-of-type(1) { color: darkblue; font-weight: bold; }
body > .alert:nth-of-type(2) { color: darkgreen; font-weight: bold; }
body > .alert:nth-of-type(3) { color: darkred; font-weight: bold; }