JSFiddle - React, Tailwind, and code Playground

HTML

<div class=columns>
        <div class="col col-1" id="RightName">SOLDATOVA</div>
        <div class="col col-2" id = LeftName>DROR Y B</div>
    </div>


    <div class=columns>
        <div class="col country-1">45</div>

        <div class="col country-2">0</div>

    </div>


    <div class=columns>
        <div class="score-1">9</div>

        <div class="round-clock">
            <div class="round">T1</div>
            <div class="clock">3:00</div>
        </div>

        <div class="score-2">8</div>
    </div>

    <div class=columns>
            <div class=country>RUS</div>
            <div class=logo> 
                <img src="https://dummyimage.com/150x100/ff00ff/000000.png"> </img>
             </div>
            <div class=country>ISR</div>
        </div>

CSS

html{
    width: 100%;
    height:100%;
    background:black;
    font-family: Impact;
    margin: 0px;
}

.columns{
    display:flex;
    justify-content: space-between;

}


.col-1{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    background: green;
    color: white;
    height: 25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.col-2{
    display:flex;
    align-items: center;
    justify-content: center;

    width:50%;
    color:white;
    background: red;
    height:25vh;
    font-size: calc(5vw + 5vh + 2.5vmin);
    min-width: 200px;
    min-height:100px;

}

.score-1 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}

.clock {
   text-align:center;
    width:60vh;
    font-size: calc(8vw + 8vh + 2.5vmin);
    background:black;
    color:cadetblue;

}

.score-2 {
    display:flex;
    align-items:center;
    justify-content: center;
    color:white;
    background:black;
    height:40vh;
    width:30%;
    min-width: 200px;
    min-height:100px;
    border:20px solid white;
    font-size:calc(12vw + 12vh + 2.5vmin);
}


.round-clock {
    flex-wrap: wrap;
    flex-direction: column;
    border:20px solid white;
}

.round {
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    background:navy;
    font-size:calc(2vw + 2vh + 2.5vmin);
}

.country{
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    font-size:calc(4vw + 4vh + 2.5vmin);
    flex-direction: column;
    padding: 0.8vw 8vw 0.8vw 8vw;
}

JavaScript

require('electron').ipcRenderer.on('update', (event, msg) => {
            console.log(msg);
            document.getElementById("RightName").innerHTML = msg["RightName"];
            document.getElementById("LeftName").innerHTML = msg["LeftName"]; 
            document.getElementsByClassName("clock")[0].innerHTML = msg["Stopwatch"];
    });