JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="server">
    <div class="column">
        <header>
            <span class="server__title">Trade 2</span>
            <i class="indicator indicator--green"></i>
        </header>
        <table class="server__players">
            <tr class="player">
                <td class="player__name">Kredit</td>
                <td class="player__score">582</td>
                <td class="player__time">2:13:44</td>
            </tr>
            <tr class="player">
                <td class="player__name">Knuckles</td>
                <td class="player__score">52</td>
                <td class="player__time">35:20</td>
            </tr>
        </table>
    </div>
    <div class="column column--auto">
        <header>
            <span class="server__players">3/32</span>
            <span class="server__map">ctf_2fort</span>
        </header>
        <ul class="server__killfeed">
            <li class="kill">
                <span class="kill__killer">Kredit</span>
                <i class="kill__weapon ki ki-deflectgrenade ki-crit"></i>
                <span class="kill__killed">Reo</span>
            </li>
            <li class="kill">
                <span class="kill__killer">Kredit</span>
                <i class="kill__weapon ki ki-deflectgrenade"></i>
                <span class="kill__killed">Reo</span>
            </li>
        </ul>
        <ul class="server__chat">
            <li class="chat">
                <span class="chat__author">Kredit</span>
                <div class="chat__message">Pink fluffy unicorns dancing on rainbows. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </li>
            <li class="chat chat--highlighted">
                <span class="chat__author">Somebody with a long name</span>
                <div class="chat__message">!admin</div>
            </li>
        </ul>
    </div>
</div>

SCSS

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.server {
    display: flex;
    width: 600px;
    background: #1c1f26;
    font-size: 10pt;
    font-family: Segoe UI, sans-serif;
    color: #b1d6ff;
    position: relative;
    .column {
    	display: flex;
		flex-direction: column;
		&.column--auto {
			flex: 1;
		}
    }
    header {
        color: #78a8dd;
        background: rgba(0, 0, 0, 0.25);
        text-transform: uppercase;
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
    }
    .server__players td {
        padding: 3px 8px;
    }
    .server__killfeed {
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 30px;
        right: 10px;
		width: 200px;
    }
    .server__chat {
        list-style: none;
        padding: 3px 10px;
        margin: 0;
    }
}

.indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 5px #fff;
    transform: translateY(50%);
    &.indicator--green {
        background: #4cf08a;
        box-shadow: 0 0 5px #4cf08a;
    }
}

.player {
    .player__score,
    .player__time {
        opacity: 0.75;
    }
    .player__time {
        text-align: right;
    }
}

.kill {
	display: flex;
	justify-content: space-between;
}

.chat {
    .chat__author {
        display: block;
        margin-bottom: 5px;
        font-size: 0.9em;
    }
    .chat__message {
        background: rgba(0, 0, 0, 0.5);
        padding: 5px 10px;
        max-width: 200px;
    }
}