JSFiddle - React, Tailwind, and code Playground

HTML

<div class="aligner">
    <div class="canvas">
        <div class="garland">
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
        </div>

        <div class="garland">
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
            <div class="garland--light"></div>
        </div>

        <div class="window">
            <div class="window--snow">
                <div class="window--snow-item"></div>
                <div class="window--snow-item"></div>
                <div class="window--snow-item"></div>
                <div class="window--snow-item"></div>
                <div class="window--snow-item"></div>
                <div class="window--snow-item"></div>
                <div class="window--snow-item"></div>
                <div class="window--snow-item"></div>
            </div>
            
            <div class="window--star"></div>
            <div class="window--star"></div>
            <div class="window--star"></div>
        </div>
        <div class="blind"></div>
        <div class="curtain"></div>

        <div class="clock">
            <div class="clock--face"></div>
            <div class="clock--hands"></div>
        </div>

        <div class="calendar">
            <div class="calendar--head"></div>
            <div class="calendar--body"></div>
        </div>

        <div class="bookshelf">
            <div class="bookshelf--book"></div>
            <div class="bookshelf--book"></div>
            <div...

CSS

// --------------------------------- //

body {
    display: table;
    
    width: 100%;
    height: 100vh;
    
    margin: 0;
    
    background: #1b120f;
}

.aligner {
    display: table-cell;
    vertical-align: middle;
    
    padding: 20px;
}

// --------------------------------- //

.canvas {
    width: 720px;
    height: 440px;

    overflow: hidden;
    position: relative;
    margin: auto;
    
    background-color: #3B1D19;
    background-image:
        linear-gradient(90deg,
            transparent 48px,
            rgba(255, 255, 255, 0) 48px,
            rgba(0, 0, 0, 0.1) 50px),
            
        radial-gradient(circle closest-side,
            rgba(0, 0, 0, 0.06) 14px, 
            transparent 15px,
            transparent 25px,
            rgba(0, 0, 0, 0.06) 26px);
        
    background-size: 50px 50px;    
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

// --------------------------------- //

.floor {
    height: 80px;
    
    position: absolute;
    bottom: 0;    left: 0;
                  right: 0;
    
    background-color: #4D2924;
    background-image:
        linear-gradient(0deg,
            transparent 25px,
            rgba(255, 255, 255, 0) 25px,
            rgba(0, 0, 0, 0.25) 26px);
        
    background-size: 26px 26px;
    
    &:before {
        content: "";
        
        height: 6px;
        
        position: absolute;
        bottom: 100%;  left: 0;
                       right: 0;
                      
        background: $red;
    }
}

// --------------------------------- //

.garland {
    display: flex;
    
    width: 252px;
    
    position: absolute;
    top: 32px;    left: 30px;
    
    z-index: 1;
    
    & + & {
        left: auto;
        right: 30px;
    }
    
    &:before {
        content: "";
        
        height: 2px;
        
        position: absolute;
        top: 0;      left: 0;
        bottom: 0;   right: 0;
        
        margin: auto;
        
        background: $red;
    }
   ...