JSFiddle - React, Tailwind, and code Playground

by Beboy208

HTML

<div id="main" style="height: 300px">
    <div id="content">
        Content
    </div>
</div>

CSS

:root {
   --main-bg-color: #003c71;
   --content-fg-color: lightgray;
   --content-fg-hover-color: rgb(255,255,255);
   --content-fg-rgb: 211, 211, 211;
}

#main {
   background-color: var(--main-bg-color);
}

#content {
  /*color: var(--content-fg-color);*/
  color: rgba(var(--content-fg-rgb), 0.9);
  padding-top: 30px;
  width: 70%;
  margin: auto;
  text-align: center;
}


#content:hover {
   color: var(--content-fg-hover-color);
}