JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Firestore Database Editor</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial;
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
            background: #f4f6f8;
            color: #222
        }

        header {
            text-align: center;
            margin-bottom: 18px
        }

        .panel {
            background: white;
            padding: 18px;
            border-radius: 8px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.06)
        }

        .row {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px
        }

        label {
            width: 140px;
            font-weight: 600
        }

        input[type=text] {
            flex: 1;
            padding: 8px 10px;
            border-radius: 6px;
            border: 1px solid #dcdcdc
        }

        textarea {
            width: 100%;
            height: 360px;
            padding: 12px;
            border-radius: 6px;
            border: 1px solid #dcdcdc;
            font-family: monospace;
            font-size: 13px;
            resize: vertical
        }

        .buttons {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 10px
        }

        button {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer
        }

            button.secondary {
                background: #475569
            }

        #log {
            margin-top: 12px;
            height: 110px;
            overflow: auto;
           ...