JSFiddle - React, Tailwind, and code Playground

by linoskoczek

HTML

<p>
  I made some changes in these theme:
</p>

<code>/* fixes white searchbar */

.top-bar .searchbar .s-input {
  border-color: inherit;
  background-color: #181818;
}

/* teams on the left */

.bc-black-2 {
  border-color: #1e1e1e !important;
}

/* content border */

#content {
  border: 1px solid #212121;
}

/* separators  */

ul.comments-list .comment>.js-comment-actions,
ul.comments-list .comment>.comment-text,
.topbar-dialog .modal-content li {
  border-bottom: 1px solid #444;
}

.comments,
.flush-left {
  border-top: 1px solid #444;
}

/* answer menu */

.mdhelp {
  filter: invert(100%);
}
</code>

<p>
  Additionally, I followed <a href="https://userstyles.org/users/511159"></a> tip to change every .so-header to .top-bar. Full CSS code is in CSS tab.
</p>

CSS

body {
  background-color: #222;
  color: #DDD;
}

#hlogo {
  -webkit-filter: invert(100%);
}

#hmenus .nav ul li a {
  background-color: #444;
}

#hmenus .nav ul li.youarehere a,
#hmenus .nav ul li a:hover {
  background-color: #158;
}

#content {
  background-color: #333;
}

.top-bar {
  background-color: #383838;
}

body.question-page.new-topbar {
  color: #EEE;
}

.top-bar .navigation .-item._current .-link {
  color: #FFF;
}

.top-bar .navigation .-link {
  color: #BBB;
}

.top-bar .-logo._glyph:hover {
  background-color: #158;
}

.top-bar .navigation .-link:hover {
  color: #DDD;
  background-color: #158;
}

.top-bar .secondary-nav .-link:hover {
  color: #DDD !important;
  background-color: #158 !important;
}

.top-bar .my-profile:hover {
  background-color: #158;
}

.top-bar .my-profile .-rep {
  color: #EEE;
}

.top-bar .searchbar input[type="text"].f-input {
  color: #AAA;
}

.f-input,
input[type="text"].f-input {
  background-color: #222;
}

#question-header .question-hyperlink {
  color: #F69C55;
}

.vote span,
a {
  color: #8CF;
}

a.bounty-link,
.subheader h2 {
  color: #FFF;
}

code {
  background-color: #1E1E1E;
}

.post-tag,
.geo-tag,
.container .chosen-choices .search-choice,
.container .chosen-container-multi .chosen-choices li.search-choice {
  background-color: #444;
  color: #8CF;
}

.user-info,
.badgecount,
.post-menu>a {
  color: #AAA;
}

.post-menu>a:hover,
.favoritecount b {
  color: #DDD;
}

.label-key b,
.label-key strong {
  color: #FED;
}

.label-key,
.question-hyperlink:visited,
.answer-hyperlink:visited,
#hot-network-questions ul a:visited {
  color: #DEF;
}

.question-hyperlink,
.answer-hyperlink {
  color: #F69C55;
}

.question-page #answers .answer {
  background-color: #333 !important;
}

.question-page #answers .answer.accepted-answer {
  background-color: #303438 !important;
}

.question-page #answers .answer.downvoted-answer {
  background-color: #383030 !important;
}

.question-page #answers...