JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="wrapper">
    <div class="wrapper-center">
    
        <div class="placescore">
            <div>
                <div class="placescore-dot placescore-dot-1">
                    <div></div> 
                </div>
                <div class="placescore-dot placescore-dot-2">
                    <div></div> 
                </div>
                <div class="placescore-dot placescore-dot-3">
                    <div></div> 
                </div>
                <div class="placescore-dot placescore-dot-4">
                    <div></div> 
                </div>
                <div class="placescore-dot placescore-dot-5">
                    <div></div> 
                </div>
            </div>
        </div>
    
    <div>
<div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    background: #ff5e3a;
    background: -webkit-linear-gradient(top, #ff5e3a 0%, #ff2b67 100%);
    background: -moz-linear-gradient(top, #ff5e3a 0%, #ff2b67 100%);
    background: linear-gradient(to bottom, #ff5e3a 0%, #ff2b67 100%);
    background-attachment: fixed;
}

.wrapper {
    display: table;
    width: 100%;
    height: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.wrapper-center {
    display: table-cell;
    width: 100%;
    height: 100%;
    padding: 10%;
    vertical-align: middle;
}

.placescore {
    width: 40%;
    height: 0;
    padding: 8% 8% 32% 8%;
    padding: 8% 8% -webkit-calc(32% - 4px) 8%;
    padding: 8% 8% -moz-calc(32% - 4px) 8%;
    padding: 8% 8% calc(32% - 4px) 8%;
    margin: 0 auto;
    border: 2px solid #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

@media (min-width: 400px) {
    .placescore {
        padding: 8% 8% -webkit-calc(32% - 6px) 8%;
        padding: 8% 8% -moz-calc(32% - 6px) 8%;
        padding: 8% 8% calc(32% - 6px) 8%;
        border: 3px solid #fff;
    }
}

@media (min-width: 600px) {
    .placescore {
        padding: 8% 8% -webkit-calc(32% - 8px) 8%;
        padding: 8% 8% -moz-calc(32% - 8px) 8%;
        padding: 8% 8% calc(32% - 8px) 8%;
        border: 4px solid #fff;
    }
}

.placescore > div {
    position: relative;
    width: 66%;
    height: 0;
    padding-bottom: 100%;
    margin: 0 auto;
}

.placescore-dot {
    position: absolute;
    width: 50%;
    height: 0;
    padding: 3% 3% 47% 3%;
}

.placescore-dot > div {
    width: 100%;
    padding-bottom: 100%;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/*
I used left & top because of a rendering bug
width translate3d on resize
*/

/*
And wow - the IE is buggy...