JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<section>
  <div class="default">Visible</div>
</section>

<section>
  <div class="override">Visible</div>
</section>


<section>
  <div class="default">Invisible</div>
  <div class="override">Visible</div>
</section>


<section>
  <div class="override">Visible</div>
  <div class="default">Invisible</div>
</section>

CSS

.default {
  display: none;
}

.default:first-of-type:last-of-type {
  display: block;
}

/* styling for demo purposes */
* {
  box-sizing: border-box;
}

.default, .override {
  width: 12em;
  text-align: center;
  padding: 0.4em 0.6em;
}
.default {
  background: #ccffdd;
}

.override {
  background: #ccddff;
}

section {
  margin: 2em;
  box-shadow: 0 0 3px 1px black;
  width: 12em;
}