JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="doc_layout bgs">
  <div>
  250px, 25%
  </div>
  <div>
  1fr
  </div>
</div>


  <div class="customCursor bgTUR">
   custom cursor -> cursor: url(**),auto;
  </div>


<div>
  <span class="fillText fontBigBold">
  FILL TEXT
  </span>
  <span class="textStroke font24Bold">
  (text-stroke: 2px red)
  </span>
</div>

<div class="inlineFlex">
  <div class="textEmphasis font24Bold">
  text-emphasis
  </div>
  <div class="firstLetter font24Bold">
  F::first-letter
  </div>
</div>

<div class="varColor font24Bold">
varColor fallback -> var(--oranges, green)
</div>

<div class="inlineFlex">
  <div class="writeMode tooltip inlineFlex">
  vertical <span class="tooltiptext">Vertical Tooltip</span>
  </div>

  <div class="img-container">
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAAAfv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Aff8Afv8Afv8Afv8Afv8Afv/2SgIfAAAAH3RSTlMA/Kw6tMsyp3RBNiz607ggCXFN5d3FsHhgJQuZmIWDSmp/qAAAANlJREFUOMt9kNkSgjAMRRNaFFAWcV/z/3+pvWOspZDz0txMeqYN/TPey/2+fNQ0T93Kl3Z2pGL5wRVl7CRhRxPcVsBWz4ZSjmgXbhhcgfJICQ2aZwJnhFTxDK1OUxfSS1NsjZrGkHwyUIa/9Zr6MFBmA3LVdM0H8PKLpgt+lK4RGx4IDG2+qp5x6RbqG3T6ImUtgUNV19UB5ZpSNiwJvKFIVAAVmIooiBSGAKzYFESFLslS8IpmOVmCqIiCHC/gREs0rAJT4WkZxx9BQwYeAksh7Mik82TjpoI3ZwUiKQ6yL8QAAAAASUVORK5CYII=" alt="Red dot" />
  </div>
</div>

<div class="inlineFlex">
  <a href="">JavaScript</a>
  <div class="clippath">
    clipPath
  </div>
  <input type="checkbox" checked>accent-color orange
</div>

<div class="nesting">
  <span>css nesting! (text should be green)</span>
</div>

<div class="clamp">
  clamp
</div>

<div>
  <input type="text" value="required" required><input type="text" value="not required">
</div>

<div class="wordspacing">
wordspacing
</div>

CSS

:root {
  --orange: orange;
  --coral: coral;
  font-size:20px;
}

.doc_layout{
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

.customCursor{
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAAAfv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Aff8Afv8Afv8Afv8Afv8Afv/2SgIfAAAAH3RSTlMA/Kw6tMsyp3RBNiz607ggCXFN5d3FsHhgJQuZmIWDSmp/qAAAANlJREFUOMt9kNkSgjAMRRNaFFAWcV/z/3+pvWOspZDz0txMeqYN/TPey/2+fNQ0T93Kl3Z2pGL5wRVl7CRhRxPcVsBWz4ZSjmgXbhhcgfJICQ2aZwJnhFTxDK1OUxfSS1NsjZrGkHwyUIa/9Zr6MFBmA3LVdM0H8PKLpgt+lK4RGx4IDG2+qp5x6RbqG3T6ImUtgUNV19UB5ZpSNiwJvKFIVAAVmIooiBSGAKzYFESFLslS8IpmOVmCqIiCHC/gREs0rAJT4WkZxx9BQwYeAksh7Mik82TjpoI3ZwUiKQ6yL8QAAAAASUVORK5CYII=), auto;
}

.fillText{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAYFBMVEUAAAAAfv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Afv8Aff8Afv8Afv8Afv8Afv8Afv/2SgIfAAAAH3RSTlMA/Kw6tMsyp3RBNiz607ggCXFN5d3FsHhgJQuZmIWDSmp/qAAAANlJREFUOMt9kNkSgjAMRRNaFFAWcV/z/3+pvWOspZDz0txMeqYN/TPey/2+fNQ0T93Kl3Z2pGL5wRVl7CRhRxPcVsBWz4ZSjmgXbhhcgfJICQ2aZwJnhFTxDK1OUxfSS1NsjZrGkHwyUIa/9Zr6MFBmA3LVdM0H8PKLpgt+lK4RGx4IDG2+qp5x6RbqG3T6ImUtgUNV19UB5ZpSNiwJvKFIVAAVmIooiBSGAKzYFESFLslS8IpmOVmCqIiCHC/gREs0rAJT4WkZxx9BQwYeAksh7Mik82TjpoI3ZwUiKQ6yL8QAAAAASUVORK5CYII=);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-color: black;
}

.textStroke{
  -webkit-text-stroke: 2px red;
  color: transparent;
  text-stroke: 2px red;
}

.textEmphasis{
  text-emphasis: "⏰";
}

.firstLetter::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}

.varColor{
  color: var(--oranges, green);
}

.writeMode{
  writing-mode:vertical-lr;
}

/** zoom hover ***/
.img-container {
  height: 50px; width: 100px; overflow: hidden;
 }
.img-container img {
  height: 100%; width: 100%; object-fit: cover; 
  transition: transform 200m...