JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<html>
<head>
<title></title>
<link href="css.css" rel="stylesheet" type="text/css" id="extCSSFile"/>
<script src="jq.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('#bt,#wt').on('click', function(){
        
        $('#extCSSFile').attr('href',$(this).attr('data-href'));
        var newfile = file = $('#extCSSFile');
        $('#extCSSFile').remove();
        
        $('head').append($(newfile));
    });
    });
</script>
</head>
<body>
<ul id="nav">
<li id="bt" data-href="css.css">blackTheme</li>
<li id="wt" data-href="css2.css">whiteTheme</li>
</ul>
</body>
</html>

CSS

ul{height:1000px;}

#bt, #wt{ 
    text-decoration:underline;
    color:blue;
}

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
  background-color:#aaa;
}
 
::-webkit-scrollbar-thumb {

    background-color:black;
}

file css2.css



body{
    background-color:black;
    color:white;
}
ul{height:1000px;}
#bt, #wt{ 
    text-decoration:underline;
    color:blue;
}

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
  background-color:#333;
}
 
::-webkit-scrollbar-thumb {

    background-color:white;
}