JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Sunny Heights - Detailed Builder deep v01</title>
    <style>
        body {
            margin: 0;
            display: flex;
            background: #87CEEB;
            cursor: default;
            font-family: Arial, sans-serif;
        }

        #toolbar {
            padding: 15px;
            background: #f0f0f0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }

        .tool {
            width: 50px;
            height: 50px;
            border: 2px solid #ddd;
            cursor: pointer;
            background: white;
            display: grid;
            place-items: center;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .tool:hover {
            transform: scale(1.1);
            border-color: #4CAF50;
        }

        .tool.active {
            border-color: #4CAF50;
            background: #e8f5e9;
        }

        #tower {
            display: flex;
            flex-direction: column-reverse;
            gap: 4px;
            padding: 20px;
        }

        .floor {
            display: flex;
            gap: 4px;
        }

        .tile {
            width: 48px;
            height: 48px;
            background: white;
            border: 2px solid #e0e0e0;
            position: relative;
            transition: all 0.1s;
            background-size: 80%;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 4px;
        }



     /* (Keep all previous CSS styles the same) */

        .tile.residential {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect fill='%2397c1ff' x='4' y='16' width='40' height='28'/%3E%3Cpath fill='%236b9acf' d='M4 16l20-16 20 16H4z'/%3E%3Crect fill='%23fff' x='12' y='24' width='8' height='8'/%3E%3Crect...