JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Night Party Seat Booking</title>

  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Segoe UI',sans-serif;
    }

    body{
      min-height:100vh;
      background:
        radial-gradient(circle at top, #5b1eff, #140021 60%);
      overflow-x:hidden;
      color:white;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:40px 20px;
    }

    /* animated glow */
    body::before{
      content:"";
      position:fixed;
      width:500px;
      height:500px;
      background:#ff00ea55;
      filter:blur(120px);
      top:-100px;
      left:-100px;
      animation:floatGlow 8s infinite alternate;
    }

    body::after{
      content:"";
      position:fixed;
      width:400px;
      height:400px;
      background:#00f7ff44;
      filter:blur(120px);
      bottom:-100px;
      right:-100px;
      animation:floatGlow2 10s infinite alternate;
    }

    @keyframes floatGlow{
      from{transform:translate(0,0);}
      to{transform:translate(80px,50px);}
    }

    @keyframes floatGlow2{
      from{transform:translate(0,0);}
      to{transform:translate(-60px,-40px);}
    }

    .container{
      width:100%;
      max-width:1200px;
      z-index:2;
    }

    .title{
      text-align:center;
      margin-bottom:40px;
    }

    .title h1{
      font-size:3rem;
      color:#fff;
      text-shadow:
        0 0 10px #ff00ff,
        0 0 20px #ff00ff,
        0 0 40px #ff00ff;
      animation:pulse 2s infinite;
    }

    @keyframes pulse{
      0%,100%{
        transform:scale(1);
      }
      50%{
        transform:scale(1.03);
      }
    }

    .rows{
      display:flex;
      flex-direction:column;
      gap:35px;
     ...