[html]
<style>
section {
  padding: 5rem 2rem;
  text-align: center;
  color: gray;
  font-family: system-ui;
  min-width: 50%;
  max-width: 600px;
  margin: 3rem 0;
  background: rgba(255,255,255,.025);
  position: relative;
}

section:has(img) {
  padding: 0;
  display: grid;
  place-items: center;
}
section:has(img)::after {
  content: 'Images need a container div';
  position: absolute;  
  padding: 1rem;
  background: rgba(0,0,0,.5);
  border-radius: 5px;
  color: lightgray;
}

code {
  padding: .2rem;
  background: #333;
  border-radius: 4px;
}

button {
  padding: 1rem 1rem;
  border: 0;
  color: dimgray;
  border-radius: 5px;
}

img {
  width: 100%;
}

h1 {
  font-size: 2rem;
  width: fit-content;
  margin: 0 auto;
  padding: 1rem;
}

/* resets and basic page styling*/
body {
  margin: 0;
  padding: 0;
  background: #222;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

* {
  box-sizing: border-box;
}
</style>
<script>
var lights_count = 10,
    target_elements = document.querySelectorAll('.addLights'),
    colors = ['blue','red','gold','ForestGreen','DarkViolet','orangered', 'DarkTurquoise'],
    wire_color = '#040',
    twinkle = false,
    l_width = 100 / lights_count,
    rotation_max = 35

target_elements.forEach(function(elm) {
  for(var i=0;i<lights_count;i++) {
    var l = document.createElement('div')
    l.className = 'light_box'
    l.style.width = l_width + '%'
    l.style.position = 'absolute'
    l.style.left = l_width * i + '%'
    l.style.top = '1%'
    l.style.bottom = '1%'
    l.style.borderTop = '2px solid '+wire_color
    l.style.borderBottom = '2px solid '+wire_color
    var rot = Math.random() < .5 ? -Math.random()*rotation_max : Math.random()*rotation_max
    l.innerHTML = `
    <div class='light' style='--color:${colors[i%colors.length]}; transform:rotate(${rot}deg);'></div>
    <div class='light' style='--color:${colors[(i+2)%colors.length]}; transform:rotate(${rot}deg);'></div>`
    if(twinkle) {
      l.classList.add('twinkle')
      l.style.setProperty('--delay', i / 3 - 1 + 's' )
    }
    elm.appendChild(l)
  }
})

document.body.innerHTML += `
<style>
.twinkle .light::after {
  animation: twinkle 1s linear var(--delay) infinite;
}
@keyframes twinkle {
  50% { box-shadow: 0 0 0 transparent; }
}

.light_box {
  pointer-events: none;
}
.light {
  width: 15%;
  max-width: 15px;
  aspect-ratio: 1/1;
  background: ${wire_color};
  position: absolute;
  left: 40%;
  border-radius: 25%;
  --color: gold;
}
.light:nth-child(1) {
  top: 100%;
  transform-origin: 50% 0%;
}
.light:nth-child(2) {
  bottom: 100%;
  transform-origin: 50% 100%;
}

.light::after {
  content: '';
  width: 150%;
  aspect-ratio: 1/2;
  background: 
    radial-gradient(rgba(255,255,255,.5), transparent),
    var(--color);
  box-shadow: 0 0 15px 5px var(--color);
  position: absolute;
  left: -25%;  
}
.light:nth-child(1)::after {
  top: 80%;
  border-radius: 100% / 60% 60% 125% 125%;
}
.light:nth-child(2)::after {
  bottom: 80%;
  border-radius: 100% / 125% 125% 60% 60%;
}

.addLights {
  position: relative;
}
</style>
`
</script>
<section class='addLights'>
  Add lights to any element using the<br>
  <code>.addLights</code> class
</section>

<section>
  <button class='addLights'>Buttons</button>
</section>

<section class='addLights'>
  <img src='https://picsum.photos/1920/1080' />
</section>

<section>
  <h1 class='addLights'>Headings work as well</h1>
</section>

<section class='addLights'>
  Thank you for your time.
</section>
[/html]