JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Quiz Overlay</title>

<style>
:root{
  --text: rgba(255,255,255,0.95);
  --muted: rgba(255,255,255,0.7);

  --accent: #7c5cff;
  --accent2: #24d6ff;
  --good: #4dffb5;
  --wrong: #ff6b6b;

  --glow: 0 0 40px rgba(124,92,255,0.4);
  --glow-soft: 0 0 25px rgba(36,214,255,0.3);

  --gap: clamp(12px,1.5vw,18px);
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  background:black;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  color:var(--text);
  overflow:hidden;
}

/* Stage (positioned bottom-center by default) */
.stage{
  position:absolute;
  bottom:6%;
  left:50%;
  transform:translateX(-50%);
  width:min(1200px,90vw);
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2vw,28px);
}

/* QUESTION */
.question{
  font-size:clamp(26px,2.4vw,40px);
  font-weight:800;
  letter-spacing:-0.02em;
  text-align:center;
  line-height:1.15;
  text-shadow:
    0 0 20px rgba(124,92,255,.5),
    0 0 50px rgba(36,214,255,.35);
  animation: fadeIn .6s ease;
}

/* ANSWERS GRID */
.answers{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--gap);
}

/* ANSWER ITEM */
.answer{
  position:relative;
  padding:18px 22px;
  border-radius:18px;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border:1px solid rgba(255,255,255,0.15);

  font-size:clamp(16px,1.2vw,20px);
  font-weight:600;
  letter-spacing:-0.01em;

  display:flex;
  align-items:center;
  gap:14px;

  transition: all .2s ease;
  cursor:pointer;
}

.answer::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  opacity:0;
  z-index:-1;
  filter:blur(18px);
  transition:.2s...