@navelpluisje/pcb-components/src/led/led.css

A library with native components. They are all pcb components, like a dip-switch, resitor etc.

.led {
  --background: hsl(0, 0%, 100%);
  --knob-size: 4rem;
  --led-color: green;
  display: inline-block;
  position: relative;
}

.led-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 3rem;
}

.bulp {
  background: var(--led-color);
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 0 .5rem 0 var(--led-color);
  height: 2.5rem;
  position: relative;
  width: 2rem;
}

.bulp::after {
  border-radius: 1rem 1rem 0 0;
  border-color: transparent hsla(0, 0%, 30%, .2) transparent  hsla(0, 0%, 100%, .3);
  border-style: solid;
  border-width: 0 .4rem 0 .6rem;
  box-sizing: border-box;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

.bulp-foot {
  background: var(--led-color);
  box-shadow: 0 0 .5rem 0 var(--led-color);
  height: .3rem;
  position: relative;
  width: 2.25rem;
}

.bulp-foot::after {
  border-color: transparent hsla(0, 0%, 30%, .2) transparent  hsla(0, 0%, 100%, .3);
  border-style: solid;
  border-width: 0 .6rem 0 .6rem;
  box-sizing: border-box;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  width: 100%;
}

.bulp-pins {
  border-color: transparent silver;
  border-style: solid;
  border-width: 0 .25rem .25rem;
  height: 4rem;
  width: .75rem;
}

input {
  clip: rect(0, 0, 0, 0);
  display: block;
  height: 0;
  position: absolute;
}