JSFiddle - React, Tailwind, and code Playground

by RXBeat

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Calculator-Tool</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


</head>




<body id="body" onload="consoleText();getBackup();">


    <!----- Counter ---->
    <div id="counters">


        <div>
            <p style="font-size:14px;">Total<br><a id="total">0</a></p>
            <p style="font-size:9px;"><a id="total2">0</a>%</p>

            <button style="position:fixed; bottom:57px; right:2px; font-size:12px; background-color:transparent;color:#888; border: none; outline: 0;" type="button" onClick="Reset()">⟲</button>
        </div>




        <!----- COUNTER TEST 1 ---->
        <div id="counter1" class="ctr">
            <h1 style="margin-top:0px; font-size:14px!important;">&nbsp;&nbsp;Fussball&nbsp;&nbsp;</h1>

            <p id="fsb" class="displays" style="font-size:16px">
                0
            </p>

            <div>
                <ul>
                    <li><button onclick="addfsb(5); addfsb2(1.0);" style="border-radius:3px;border:black;width:20px;">+5</button></li>
                    <li><button onclick="addfsb(1); addfsb2(0.2);" style="border-radius:4px;border:black;width:40px;font-size:1em;background:#50D050;" id="plus1fussball">+1</button></li>
                    <li><button onclick="delfsb(1); delfsb2(0.2);" style="border-radius:3px;border:black;width:20px;">-1</button></li>
                </ul>
            </div>
        </div>


        <!----- COUNTER TEST 2 ---->
        <div id="counter2" class="ctr">
            <h1 style="margin-top:0px; font-size:14px!important;">&nbsp;&nbsp;Basketball&nbsp;&nbsp;</h1>

            <p id="bsk" class="displays" style="font-size:16px">
                0
            </p>

            <div>
                <ul>
                    <li><button onclick="addbsk(5); addbsk2(2.225);" style="border-radius:3px;border:black;width:20px;">+5</button></li>
                   ...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto|sans-serif&display=swap');

        :root {
            --bg-color: #202124;
        }

        * {
            font-family: 'Google Sans', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: #202124;
            color: #e8eaed;
        }

        /*  COUNTER */
        .ctr {
            border: 1px solid #8484841c;
            border-radius: 0px;
            margin: 0px;
            padding: 0px;
        }

        #counters {
            z-index: 99;
            text-align: center;
            margin: auto;
            position: fixed;
            bottom: 14px;
            width: 100%;
            margin-bottom: 0px;
            z-index: 100;
            background-color: #2a2a2a;
        }

        #counter1 {
            width: 50%;
            float: left;
        }

        #counter2 {
            width: 50%;
            float: right;
        }

        .ctr ul {
            margin: 0px;
        }

        .ctr ul li {
            display: inline;
        }

        .ctr h2 {
            padding: 0px;
            margin: 0px;
        }

        .displays {
            font-size: 1.3em;
            color: #00a800;
            margin: 0px;
        }