JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Song Questionnaire</title>
  <style>
    label {
      display: inline-block;
      margin-bottom: 5px;
    }
    .toggle-button {
      display: inline-block;
      padding: 8px 16px;
      border: none;
      background-color: #eee;
      color: #555;
      cursor: pointer;
      outline: none;
    }
    .toggle-button.toggle-button-checked {
      background-color: green;
      color: white;
    }
    textarea {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
    }
    .summary {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px;
    }
    body {font-family: sans-serif}
  </style>
</head>
<body>
  <h1>Song Questionnaire</h1>
  <form>
    <h2>Track Information</h2>
    <label>
      Artist Name:
      <input type="text" name="artist" required>
    </label><br>
    <label>
      Track Name:
      <input type="text" name="track" required>
    </label><br>
    <label>
      BPM:
      <input type="number" name="bpm" placeholder="120" value="120" required>
    </label>

     <h2>1. What is the overall vibe of this track?</h2>
    <label>
      <input type="checkbox" name="vibe" value="Aggressive" hidden>
      <button class="toggle-button">Aggressive</button>
    </label>
    <label>
      <input type="checkbox" name="vibe" value="Atmospheric" hidden>
      <button class="toggle-button">Atmospheric</button>
    </label>
    <label>
      <input type="checkbox" name="vibe" value="Energetic" hidden>
      <button class="toggle-button">Energetic</button>
    </label>
    <label>
      <input type="checkbox" name="vibe" value="Chill" hidden>
      <button class="toggle-button">Chill</button>
    </label>
    <label>
      <input type="checkbox" name="vibe" value="Romantic" hidden>
      <button class="toggle-button">Romantic</button>
    </label>
    <label>
      <input type="checkbox" name="vibe" value="Dark" hidden>
      <button class="toggle-button">Dark</button>
    </label>
   ...