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;
    }
    input[type="checkbox"] {
      display: none;
    }
    .toggle-button {
      display: inline-block;
      padding: 8px 16px;
      border: none;
      background-color: #eee;
      color: #555;
      cursor: pointer;
      outline: none;
    }
    .toggle-button:checked {
      background-color: green;
      color: white;
    }
    textarea {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Song Questionnaire</h1>
  <form>
    <h2>1. What is the overall vibe of this track?</h2>
    <label for="vibe-happy">
      <input type="checkbox" id="vibe-happy" name="vibe" value="Happy">
      <button class="toggle-button">Happy</button>
    </label>
    <label for="vibe-sad">
      <input type="checkbox" id="vibe-sad" name="vibe" value="Sad">
      <button class="toggle-button">Sad</button>
    </label>

    <h2>2. What feelings does this track evoke in you?</h2>
    <label for="feelings-happy">
      <input type="checkbox" id="feelings-happy" name="feelings" value="Happy">
      <button class="toggle-button">Happy</button>
    </label>
    <label for="feelings-sad">
      <input type="checkbox" id="feelings-sad" name="feelings" value="Sad">
      <button class="toggle-button">Sad</button>
    </label>

    <h2>3. What are the top 3 musical lines driving this track?</h2>
    <label for="musicalLines-vocals">
      <input type="checkbox" id="musicalLines-vocals" name="musicalLines" value="Vocals">
      <button class="toggle-button">Vocals</button>
    </label>
    <label for="musicalLines-guitar">
      <input type="checkbox" id="musicalLines-guitar" name="musicalLines" value="Guitar">
      <button class="toggle-button">Guitar</button>
    </label>
    <label for="musicalLines-piano">
      <input type="checkbox" id="musicalLines-piano" name="musicalLines"...