JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FPS Server Launcher</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'warm-black-light': 'rgb(43, 42, 39)',
                        'warm-black-dark': 'rgb(33, 32, 29)',
                        'custom-orange': '#ff6600',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
        }
        .perspective-container {
            perspective: 1000px;
        }
        .image-3d {
            transform: rotateY(-20deg) rotateX(5deg);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        }
        .image-3d:hover {
            transform: rotateY(-15deg) rotateX(3deg) scale(1.05) translateZ(20px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-warm-black-light to-warm-black-dark text-gray-200 min-h-screen">
    <div class="container mx-auto px-4 py-12">
        <header class="flex justify-between items-center mb-12">
            <div class="text-3xl font-bold text-custom-orange">FPSLaunch</div>
            <nav>
                <a href="#" class="mx-2 hover:text-custom-orange">Home</a>
                <a href="#" class="mx-2 hover:text-custom-orange">Features</a>
                <a href="#" class="mx-2 hover:text-custom-orange">Download</a>
            </nav>
        </header>

        <main class="flex flex-col md:flex-row items-center justify-between">
            <div class="md:w-1/2 mb-8...