JSFiddle - React, Tailwind, and code Playground

by brownie2026

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>限界シャウト力測定器</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: #121212;
            color: #ffffff;
            text-align: center;
            padding: 20px;
            margin: 0;
        }
        h1 { color: #ff3333; margin-bottom: 5px; }
        .subtitle { color: #aaaaaa; font-size: 14px; margin-bottom: 25px; }
        
        #startBtn {
            font-size: 18px; padding: 12px 35px;
            background-color: #ff3333; color: white; border: none;
            border-radius: 25px; cursor: pointer; font-weight: bold;
            box-shadow: 0 4px 15px rgba(255, 51, 51, 0.4);
            transition: 0.2s; margin-bottom: 20px;
        }
        #startBtn:hover { background-color: #ff5555; transform: scale(1.05); }
        #startBtn:disabled { background-color: #333333; cursor: not-allowed; box-shadow: none; color: #777; }

        .dashboard {
            display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; max-width: 600px; margin: 0 auto;
        }
        .card {
            flex: 1; min-width: 250px; background: #1e1e1e; border: 1px solid #333;
            border-radius: 15px; padding: 20px; box-sizing: border-box;
        }
        .card-max {
            border: 2px solid #ffcc00; background: linear-gradient(145deg, #1e1e1e, #2a2510);
        }
        .label { font-size: 14px; color: #aaa; font-weight: bold; margin-bottom: 10px; }
        .percent-display { font-size: 64px; font-weight: 900; font-family: 'Impact', sans-serif; }
        #currentPercent { color: #00ffcc; text-shadow: 0 0 10px rgba(0,255,204,0.3); }
        #maxPercent { color: #ffcc00; text-shadow: 0 0 15px rgba(255,204,0,0.4); }

        #judgment {
            font-size: 32px; font-weight: bold;...