JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
<div class="container">

  This is some <code style="--bs-bg-opacity: .5;">code</code> in <code class="blue">NAVY</code>

</div>

CSS

code {
  --bs-code-bg-opacity: .5;
  --bs-bg-color: var(--bs-pink);
  --bs-border-color: var(--bs-pink);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-pink);
  /* background-color: rgba(#{to-rgb(var(--bs-bg-color))}, var(--bs-code-bg-opacity)) !important; */
  background-color: var(var(--bs-pink)66);
  border-radius: 4px;
  padding-left: 2px;
  padding-right: 2px;
}


code.blue {
  color: var(--bs-blue) !important;
  --bs-border-color: var(--bs-blue);
}