JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Text Logo Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* For custom scrollbars if needed, optional */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #2d3748; /* gray-800 */
        }
        ::-webkit-scrollbar-thumb {
            background: #4a5568; /* gray-600 */
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #718096; /* gray-500 */
        }
        .logo-text-container {
            display: flex;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d; /* Crucial for 3D transforms */
        }
        .logo-text {
            display: inline-block; /* Allows transforms */
            transform-origin: center center;
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen p-4 sm:p-8 font-sans flex flex-col">

    <header class="mb-8 text-center">
        <h1 class="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-transparent bg-clip-text">
            3D Text Logo Generator
        </h1>
        <p class="text-gray-400 mt-2">Create "Bryce 3D"-inspired text logos with various effects.</p>
    </header>

    <main class="flex-grow flex flex-col lg:flex-row gap-8">
        <!-- Controls Panel -->
        <div class="lg:w-1/3 bg-gray-800 p-6 rounded-lg shadow-2xl self-start lg:sticky lg:top-8">
            <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">Controls</h2>
            
            <div class="mb-4">
                <label for="inputText" class="block text-sm font-medium text-gray-300 mb-1">Text:</label>
                <input type="text"...