JSFiddle - React, Tailwind, and code Playground

by Kofod

HTML

<div id="vp-dunk-darts-game">
<style type="text/css">
#vp-dunk-darts-game,
#vp-dunk-darts-game * {
    box-sizing: border-box;
}

#vp-dunk-darts-game {
    width: 960px;
    height: 700px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    font-family: Arial, Geneva, sans-serif;
    color: #74485a;
    background: linear-gradient(135deg, #ffd2e4 0%, #ffe1d2 25%, #ffefc1 50%, #ecf2cf 75%, #d8f1e4 100%);
    border: 4px solid #e79bb5;
    border-radius: 18px;
    user-select: none;
}

#vp-dunk-darts-game .dd-scene {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* BACKGROUND DECOR */
#vp-dunk-darts-game .dd-cloud {
    position: absolute;
    border-radius: 999px;
    background: rgba(255,255,255,0.65);
    z-index: 1;
}

#vp-dunk-darts-game .dd-cloud:before,
#vp-dunk-darts-game .dd-cloud:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.72);
}

#vp-dunk-darts-game .dd-cloud-one {
    width: 150px;
    height: 44px;
    left: 55px;
    top: 90px;
}

#vp-dunk-darts-game .dd-cloud-one:before {
    width: 58px;
    height: 58px;
    left: 24px;
    top: -25px;
}

#vp-dunk-darts-game .dd-cloud-one:after {
    width: 74px;
    height: 74px;
    left: 68px;
    top: -38px;
}

#vp-dunk-darts-game .dd-cloud-two {
    width: 190px;
    height: 52px;
    right: 280px;
    top: 54px;
}

#vp-dunk-darts-game .dd-cloud-two:before {
    width: 76px;
    height: 76px;
    left: 34px;
    top: -38px;
}

#vp-dunk-darts-game .dd-cloud-two:after {
    width: 82px;
    height: 82px;
    left: 92px;
    top: -43px;
}

#vp-dunk-darts-game .dd-ground {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 132px;
    background: linear-gradient(#ffd2e4, #e79bb5);
    border-top: 4px solid rgba(116,72,90,0.16);
    z-index: 2;
}

/*...