Live Code Arena

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { 
      background: #f4f7fe; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      height: 100vh;
      font-family: 'Segoe UI', sans-serif;
    }
    .main-card {
      background: white;
      padding: 40px;
      border-radius: 24px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.05);
      text-align: center;
      max-width: 400px;
    }
    .btn-custom {
      background: linear-gradient(135deg, #9d6bdf, #7c3aed);
      color: white; border: none; padding: 12px 30px;
      border-radius: 12px; font-weight: 600;
      transition: 0.3s;
    }
    .btn-custom:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(157, 107, 223, 0.3); color: white; }
  </style>
</head>
<body>

<div class="main-card">
    <h2 class="mb-3">Live Preview 🚀</h2>
    <p class="text-muted">Ubah kode di sisi kiri dan lihat perubahannya di sini secara instan.</p>
    <button class="btn btn-custom">Klik Saya!</button>
  </div>

</body>
</html>

Live Output