JSFiddle - React, Tailwind, and code Playground

by mmarkey

HTML

<div class="room">Room</div>

<div class="room default-hovered">Room hovered</div>

<div class="room selected">Room selected</div>

<div class="room selected default-hovered">Room selected and hovered</div>

<div class="room occupied">Room occupied</div>

<div class="room occupied selected"> Room occupied and selected</div>

<div class="room occupied hovered"> Room occupied and hovered</div>

<div class="room occupied hovered selected"> Room occupied and hovered and selected</div>

CSS

.room {
    background-color: grey;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
.room.default-hovered {
    background-color: #aaaaaa;
    border-color: #555555;
    border-style: solid;
    border-width:5px;
}

div .default-hovered { border-color: green; }

div.selected {
    background-color: #6688ee;
    border-color: #3333aa;
    border-width: 1 px;
    border-style: solid;
}

div.selected.default-hovered{
    background-color: #88aaee;
    border-color: #4466cc;
}

div.occupied {
    background-color:green;
}

div.occupied.selected {
    background-color: #33aa33;
    border-color: green;
    border-width: 2px;
    border-style: solid;
    
}

div.occupied.hovered {
    background-color: #55cc55;
    border-color: green;
    border-width: 3px;
    border-style: solid;
}