JSFiddle - React, Tailwind, and code Playground

by Vince Aggrippino

HTML

<div class="fieldwrapper">
  <input type="text">
  <svg>
    <line x1="1" y1="1" x2="1" y2="9" stroke="black" />
    <line x1="9" y1="1" x2="9" y2="9" stroke="black" />
  </svg>
</div>

CSS

.fieldwrapper {
  background-color: beige;
  position: relative;
  width: 20em;
  height: 3em;
}

input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}