JSFiddle - React, Tailwind, and code Playground

by ralfavatar

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>
    <!-- Menu -->
    <nav class="navbar navbar-expand-lg navbar-dark navbar-fixed-top py-lg-0">
        <div class="container-fluid">
            <a href="index.html" class="navbar-brand">Moin</a>
            <button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
                <span class="sr-only">Toggle navigation</span>
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="navbarResponsive">
                <ul class="navbar-nav navbar-right ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Ganz wichtig</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Noch wichtiger</a></li>
                    <li class="nav-item active"><a class="nav-link" href="#">Über mich</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Content -->
    <section class="mainsection">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-1 col-sm-3" id="debug1">
                    <nav class="nav nav-pills flex-column d-none d-lg-block">
                        <a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
                  ...

CSS

:root {
    /*    --kls-dark: #67113e;*/
    --kls-dark: #460a29;
    --kls-med: #60446b;
    --kls-light: #d6446b;
}

#debug1 {
    background-color: yellow;
}

#debug2 {
    background-color: red;
}

.navbar-expand,
.navbar-expand-xl,
.navbar-expand-lg,
.navbar-expand-md,
.navbar-expand-sm {
    background-color: var(--kls-dark);
    border-color: var(--kls-med);
}

.navbar-dark .navbar-nav>li>a,
.navbar-expand .navbar-nav>li>a,
.navbar-expand-xl .navbar-nav>li>a,
.navbar-expand-lg .navbar-nav>li>a,
.navbar-expand-md .navbar-nav>li>a,
.navbar-expand-sm .navbar-nav>li>a {
    color: white;
}

.navbar-dark .navbar-nav>li>a:hover,
.navbar-dark .navbar-nav>li>a:focus,
.navbar-expand-md .navbar-nav>li>a:hover,
.navbar-expand-md .navbar-nav>li>a:focus {
    color: var(--kls-med);
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
}

.navbar-dar .navbar-toggler {
    border-color: white;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(245, 245, 245, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar {
    border-bottom: 7px solid var(--kls-light);
}