JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Interactive Story Adventure</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
    
    
        /* Add these new styles */
    .story-content {
        background: rgba(0, 0, 0, 0.85);
    }
    .no-image-mode {
        background: white !important;
        color: #1a1a2e !important;
    }
    .text-large {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    
        .game-bg {
            background: linear-gradient(45deg, #1a1a2e 0%, #16213e 100%);
        }
        .image-container {
            transition: background 0.3s ease;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- Loading Screen -->
    <div id="loading-screen" class="fixed inset-0 bg-white flex flex-col items-center justify-center space-y-4">
        <h1 class="text-4xl font-bold text-gray-800 mb-8">Story Adventure</h1>
        <input type="file" id="story-upload" accept=".json" class="hidden">
        <div class="flex flex-col gap-4">
            <button onclick="document.getElementById('story-upload').click()" 
                    class="px-8 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                Load Story JSON
            </button>
            <button onclick="enterEditorMode()" 
                    class="px-8 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
                Editor Mode
            </button>
            <button onclick="startGame()" id="play-button" 
                    class="px-8 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition hidden">
                Play Story
            </button>
        </div>
        <div id="load-error" class="text-red-500 hidden mt-4">Invalid story file!</div>
    </div>

    <!-- Editor Interface -->
    <div id="editor" class="hidden container mx-auto p-6">
        <div class="flex justify-between mb-6">
            <h2 class="text-2xl font-bold text-gray-800">Story...