JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://fonts.googleapis.com/css?family=Raleway:400,300,600"></script>
<nav id="top-nav-menu" class="sticky top-nav-menu">

  <button id="TopNavMenuResponsive" class="fa fa-bars" onclick="TopNavMenuResponsive()">
    <!--        <i class="fa fa-bars"></i>-->
  </button>

  <ul class="top-nav-menu-list">
    <li class="favicon-menu">
      <a href="/" class="">
        <img src="https://eurobytes.eu/favicon.png" alt="favicon" style="width:25px !important;">
      </a>
    </li>
    <li id="menu-items">


    </li>

    <li style="margin: 10px 5%;padding:0px;float:right;">
      <!--			<button onclick="myFunction()" style="margin: 0px;padding: 0px;">Toggle dark mode</button>-->
      <i id="ThemeSwitcher" class="fa-solid fa-moon" onclick="ThemeSwitcher()"></i>

    </li>

  </ul>

</nav>


<div class="wrapper">

  <div class="content">

    <section class="container" id="top">

      <h1>
        EuroBytes EU
        <!-- <br>
					<small style="font-size: 25px;">Coming Soon</small> -->
      </h1>

      <p>
        EuroBytes Hosting is a new application hosting company for small businesses, such as personal trainers, restaurants, bloggers and the likes.
      </p>
    </section>

    <section class="container" id="different">

      <h2>How is this different?</h2>

      <div class="icon-box">
        <i class="fa-solid fa-question"></i>
     ...

CSS

h2,
      h3,
      h4,
      h5,
      h6 {
        text-align: left;
      }


*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body, html {
	height: 100%;
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;


	/* Transition test */
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

a {
    background-color: transparent;
    color: #3465A4;
    text-decoration: none;
    outline: none;
}

a:hover {
    text-decoration: underline;
    transition: color 500ms ease 0s;
}

h1 {
	text-align: center;
}

h2 {
	font-size: 250%;
	text-align: center;
}

h1,h2 {
	border-bottom: 1px solid #CCCCCC;
}

h2#Feature_Comparison {
	text-align: center !important;

}

div.main.container {
	margin-top: 1%;
}

.fa-brands {
	font-size: 250% !important;
	/*font-size: 5em !important;*/
}


table {
	width: 100%;
}

table, td, tr, th, caption {
	text-align: center;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	border: 1px solid #454545;
}

th, td {
	text-align: center;
	padding: 16px;
	border-right: 0px none !important;
	border-bottom: 1px solid #454545;
}

th:first-child, td:first-child {
	text-align: center;
}

tr:nth-child(even) {
	/*background-color: #f2f2f2;*/
/*	background-color: rgb(15, 17, 17) !important;*/
	/*background-color: #181a1b;*/
	/*opacity: 0.25;*/
}

tr:hover {
	/*background-color: rgb(216, 212, 207);*/
	opacity: 0.75;
}

table .description {
	text-align: left;
}


.icon-box {
	float: right;
	font-size: 4em;
	width: 250px;
	text-align: center;
}

.wrapper {
	min-height: 100%;
	position: relative;
}

.content {
	padding: 0px 0px 5% 0px !important;
	margin: 0% auto -5% auto !important;
}

figure {
	text-align: center;
}

figure figcaption ul.links {
	list-style-type: none;
}

figure figcaption ul.links li {
	display: inline-block;
	vertical-align: middle;
	padding: 0px 10px;
}

figure figcaption...

JavaScript

$(document).ready(function() {
    $(".fancybox").fancybox();
});



function ThemeSwitcher() {

    var body = document.body;

    // body.classList.toggle("light-mode");

    // Get the HTML tag
    // var html = document.getElementById("EBSEU");

    // Get the theme switcher button
    var ThemeSwitcher = document.getElementById("ThemeSwitcher");

    // Check if the light mode is already on
    if (body.className === "light-mode") {
        // Light mode is on

        // Removing light mode
        body.classList.remove('light-mode');

        // Removing sun icon
        ThemeSwitcher.classList.add('fa-sun');

        // Adding moon icon
        ThemeSwitcher.classList.remove("fa-moon");

        body.classList.add("dark-mode");


    } else {
        // Light mode is not on, so assuming we are on night mode.
        body.classList.add("light-mode");
        body.classList.remove("dark-mode");

        // Removing sun icon
        ThemeSwitcher.classList.remove('fa-sun');

        // Adding moon icon
        ThemeSwitcher.classList.add("fa-moon");
    }
}



/**************************************************
 Author      : Imri Paloja
 Email       : [email protected]
 HomePage    : www.eurobytes.nl
 Version     : 0.1
 Name        : index.js
 Description : Automatic index
 **************************************************/

/*          Notes

    1.  If a header has the same name - which is not recommended -
        the script will apply the id's twice. Therefore clicking to
        the second header with the same id will not work!

            Possible fix:
            setInterval(function() {
                var number = 1 + Math.floor(Math.random() * 100);
                $('id').text(number);
            });

    2.  The script needs a `body` not `<body onload="onLoad()">`.
        It will not work without!

*/

// When clicked on the tocbutton, the following will be excecuted:
function index() {
    var index =
        // style="display: block;"
...