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.0">
    <title>3D Text Screensaver</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
        @layer utilities {
            .perspective-1000 {
                perspective: 1000px;
            }
            .transform-style-preserve-3d {
                transform-style: preserve-3d;
            }
        }
        body {
            overscroll-behavior: none; /* Prevent pull-to-refresh on mobile */
        }
        /* For better visual of the 3D effect, especially with wireframe */
        .text-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            backface-visibility: hidden; /* Can improve performance and look */
            font-weight: bold;
            text-transform: uppercase;
            font-family: Arial, Helvetica, sans-serif; /* A blocky font helps */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 flex flex-col min-h-screen select-none">

    <!-- Controls Panel -->
    <div id="controlsPanel" class="bg-gray-800 p-4 shadow-lg w-full md:w-96 md:fixed md:top-0 md:right-0 md:bottom-0 md:overflow-y-auto z-20">
        <h2 class="text-xl font-semibold mb-4 text-center">3D Text Controls</h2>

        <div class="mb-3">
            <label for="displayText" class="block text-sm font-medium mb-1">Display Text:</label>
            <input type="text" id="displayText" value="Tailwind" class="w-full p-2 bg-gray-700 border border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>

        <div class="grid grid-cols-2 gap-4 mb-3">
           ...