JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
        input[type="checkbox"] {
            background-color: #002B4E !important;
            color: white;
        }

        input[type="checkbox"]:enabled:checked {
            background-color: #002B4E !important;
            color: white;
        }

                input[type="checkbox"]:before {
            background-color: #002B4E !important;
            color: white;
        }

                                input[type="checkbox"]::before {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:checked {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]::after {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:hover {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:active {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:target {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:checked {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:checked + label {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"] + label {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"] + label:before {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"] + label::before {
            background-color: #002B4E !important;
            color:...

CSS

input[type="checkbox"] {
            background-color: #002B4E !important;
            color: white;
        }

        input[type="checkbox"]:enabled:checked {
            background-color: #002B4E !important;
            color: white;
        }

                input[type="checkbox"]:before {
            background-color: #002B4E !important;
            color: white;
        }

                                input[type="checkbox"]::before {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:checked {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]::after {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:hover {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:active {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:target {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:checked {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"]:checked + label {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"] + label {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"] + label:before {
            background-color: #002B4E !important;
            color: white;
        }

        .dark-checkbox input[type="checkbox"] + label::before {
            background-color: #002B4E !important;
            color: white;
        }