JSFiddle - React, Tailwind, and code Playground

by szal

HTML

<div>
  <span>Content outside the label</span>
  <label>Label 1</label>
  <input>
</div>
<div>
  <span>Content outside the label</span>
  <label class="shaded-box">Label 2</label>
  <input>
</div>
<div>
  <span>Content outside the label</span>
  <label class="shaded-box">Label 3</label>
  <input>
</div>
<div>
  <span>Content outside the label</span>
  <label>Label 4</label>
  <input>
</div>

CSS

.shaded-box {
  position: relative;
  background-color: rgba(255,255,255,0);
}

.shaded-box::after {
  position: absolute;
  content: '';
  background-color: #eee;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  z-index: -1;
}