JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
<nav class="navbar navbar-expand-lg color-dark w-100 position-fixed">
        
        <div class="container">
            
            <a class="navbar-brand" href="/"><img src="://runyour.agency/local/howdoweb.com/uploads/images/2020/5/1590625157534_how%20do%20w.svg" alt="" height="50"></a>
            
            <button class="navbar-toggler navbar-toggler-left collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>				
            </button>
            
            <div id="navbar-collapse" class="collapse navbar-collapse">
            
                
                <ul class="navbar-nav nav-pills">
                        <li class="nav-item order-2">
                            <a class="nav-link neon-page-section-click neon-page-section-nav-link" href="/editor/5/1">How it works</a>
                            <ul>
                            
                            </ul>
                        </li>
                    
                        <li class="nav-item order-2">
                            <a class="nav-link neon-page-section-click neon-page-section-nav-link" href="/editor/3/1">Features</a>
                            <ul>
                            
                            </ul>
                        </li>
                    
                        <li class="nav-item order-2">
                            <a class="nav-link neon-page-section-click neon-page-section-nav-link" href="">Pricing</a>
                            <ul>
                            
                            </ul>
                        </li>
                    
...

SCSS

$primary:       #0d6efd !default;
$secondary:     #6c757d !default;
$success:       #28a745 !default;
$info:          #17a2b8 !default;
$warning:       #ffc107 !default;
$danger:        #dc3545 !default;
$light:         #e8e9ea !default;
$dark:          #343a40 !default;

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;



:root, .light-section {
    --primary-1: #F44336;
    --primary-2: #1E88E5;
    --primary-3: #FDD835;
    
    @each $color, $value in $theme-colors {
      --bs-#{$color}: #{$value};
      --bs-#{$color}-lightest: #{lighten($value, 30%)};
      --bs-#{$color}-lighter: #{lighten($value, 7%)};
      --bs-#{$color}-darker: #{darken($value, 7%)};
      --bs-#{$color}-darkest: #{darken($value, 20%)};
    }
    
    --border: #CDD9ED;
    --border-hover: #99A3BA;
    --text-color: #6C7486;
    --text-color-headline: #3F4656;

    --shadow: rgba(22, 30, 50, .04);
    --bs-white: #fff;
    --bs-black: #000;
    --bs-container-white: #333;
    --bs-body-bg: #f5f9ff;
    --bs-card-bg: #f5f9ff;
    --bs-component-bg: rgba(255,255,255,0.4);
    --bs-component-text-color: #555;
}


.dark-container {
  --bs-container-white: #333;
  --bs-body-bg: #111;
  --text-color: #fff;
  --text-color-headline: #eee;
  --border: #fff;
  --btn-border: #444; //Todo: use this on buttons / radio group
  --bs-white: #212121;
  
  --bs-card-bg: #212121;
  --bs-component-bg: rgba(0,0,0,0.1);
  --bs-component-text-color: #777;
  --bs-component-border: #fff;
}

@import 'https://fonts.googleapis.com/css?family=Encode+Sans:400,500,600,700';

html, body {
    font-family: 'Encode Sans';
    font-size: 16px;
    line-height: 22px;
    color: var(--text-color);
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
       ...