JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <title></title>
    
  <nav class="navbar navbar-expand-lg justify-content-end">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto container justify-content-center">
                <li class="nav-item">
                    <a class="nav-link" href="#">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">ABOUT ME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">PROJECTS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CONTACT</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container full-height">
        {% block content %}{% endblock %}
    </div>


    <footer class="page-footer font-small blue pt-4">
        <div...

CSS

body {
        position: relative;
        font-family: 'Poppins', sans-serif;
    }

    body>.container {
        padding-top: 60px;
    }

    a {
        color: black;
    }

    a:hover {
        text-decoration: none;
        color: black;
    }

    .navbar {
        background-color: coral;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

    .nav-link {
        color: white;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        transition: 0.1s;
    }

    .nav-link:hover {
        color: rgb(220, 217, 217);
    }

    ul {
        list-style-type: none;
    }

    /* 
    ul li {
        padding-left: 30px;
    } */

    .container.full-height {
        height: calc(100vh - 413px);
    }

    .page-footer {
        background-color: #1B1B1B;
        color: white;

    }

    .footer-copyright {
        background-color: #090909;
        color: white;
    }

    .footer-links a {
        padding: 10px 0;
        border-bottom: 1px solid #404040;
        color: #fff;
        font-size: 16px;
        display: block;
        transition: color 0.5s ease-in-out;
        transition: border 0.5s ease-in-out;
        text-decoration: none;
    }

    .footer-links a:hover {
        color: aqua;
        border-bottom: 1px solid aqua;
    }
    
    @media( max-width: 767px) {
    .container.full-height {
        height: 100%;
     }
    }