JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

<div class="container">
    <h1>Random Verb by Animal</h1>
    <div id="result">Click the button to generate!</div>
    <div class="button-container">
      <button onclick="generateRandomText()">Generate</button>
    </div>
  </div>

CSS

body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .container {
      background-color: #fff;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 350px;
    }

    h1 {
      font-size: 26px;
      margin-bottom: 20px;
      color: #333;
    }

    #result {
      font-size: 22px;
      margin-top: 20px;
      font-weight: bold;
      color: #555;
    }

    button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 5px;
      font-size: 18px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #0056b3;
    }

    button:focus {
      outline: none;
    }

    .button-container {
      margin-top: 20px;
    }

JavaScript

// Arrays
const verbs = [
  "accepted", "added", "admired", "advised", "allowed", "amused", "answered", "apologized", "appeared", "arranged",
  "arrived", "asked", "attached", "attended", "avoided", "baked", "behaved", "believed", "blamed", "borrowed",
  "breathed", "brought", "built", "burned", "called", "captured", "carried", "changed", "chased", "cheered",
  "closed", "cooked", "copied", "corrected", "coughed", "counted", "covered", "crashed", "crossed", "cried",
  "danced", "decided", "decorated", "delivered", "demanded", "described", "deserved", "destroyed", "discovered", "divided",
  "dropped", "earned", "encouraged", "enjoyed", "entered", "escaped", "examined", "existed", "explained", "failed",
  "fancied", "fed", "felt", "finished", "fixed", "followed", "forgot", "forgave", "gathered", "gave",
  "glowed", "grabbed", "guessed", "happened", "hated", "heard", "helped", "hid", "hoped", "hugged",
  "imagined", "improved", "included", "increased", "influenced", "informed", "invented", "invited", "joined", "jumped",
  "kept", "kicked", "killed", "kissed", "knew", "laughed", "learned", "left", "lent", "lied",
  "liked", "listened", "lived", "looked", "loved", "made", "managed", "married", "measured", "met",
  "minded", "missed", "moved", "needed", "noticed", "obeyed", "offered", "opened", "painted", "paid",
  "passed", "performed", "planned", "played", "pointed", "prepared", "pressed", "promised", "protected", "provided",
  "pulled", "pushed", "realized", "received", "recognized", "recovered", "refused", "remembered", "repaired", "replied",
  "returned", "roared", "rolled", "rushed", "saved", "searched", "seemed", "shared", "shouted", "showed",
  "smelled", "smiled", "solved", "sorted", "started", "stayed", "stopped", "studied", "suggested", "supported",
  "surprised", "talked", "thanked", "thought", "touched", "trained", "traveled", "treated", "trusted", "turned",
  "typed", "understood", "used", "waited", "walked", "warned", "washed", "watched", "wished",...