JSFiddle - React, Tailwind, and code Playground

by scunden

HTML

{% load static %}

<!doctype html>
<html lang="en" class="h-100">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Steven Cunden | Home</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/cover/">

    <!-- Bootstrap core CSS -->
    <link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static '/css/main.css' %}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

    <style type="text/css">
      body {
        position: relative;
        overflow-y: scroll;
      }

    </style>


    <!-- Custom styles for this template -->
    <!-- <link href="cover.css" rel="stylesheet"> -->
  </head>

  <section class="cover-thing first text-center">


    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" id='nb'>
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Steven Cunden</a>

        <div class="collapse navbar-collapse justify-content-end">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#test">TEST</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about-me">ABOUT ME</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#aoi">INTERESTS</a>
           ...

CSS

body{
     background: url("/staticfiles/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; ;
     background-size:     cover;                      /* <------ */
     background-repeat:   no-repeat;
     background-position: center center;              /* optional, center the image */

     }

 #profile-wrapper{
 	text-align: center;
 }

 #profile-pic{
 	width: 150px;
 	height: 150px;
 	border-radius: 50%;
 	margin-right: auto;
 	margin-left: auto;
 	border: 2px solid #499DD0;
 }

 ul{
 	padding: 0;
 	list-style-type: none;
 }

 .social-links ul, li{
 	list-style-type: none;
 	display: inline-block;
 }

 .social{
 	width: 20px;
 	height: 20px;
 }

  .icon-am{
 	width: 80px;
 	height: 80px;
 	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50%;
    margin-bottom: 50%	;
    border: 2px solid white;
    border-radius: 50%;
    padding: 3px;
    opacity: 0.65;
 }

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}
 

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

html, body {
    height: 100%;
}

body {
    margin: 0;
}

.cover-thing {
    width: 100%;
    height: 100%;
    float: left;  
}

.first {
    background: url("/staticfiles/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; ;
     background-size:     cover;                      /* <------ */
     background-repeat:   no-repeat;
     background-position: center center;              /* optional, center the image */
     color: white;
}

.second {
    /*background-color: #eee;*/
    background: rgba(255,255,255,.1);
    color: lightgray;
}

.third {
	background: url("/staticfiles/images/background.jpg") no-repeat center...