JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My site</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<style>
* {
color: white;
}
body, html {
background: #313131;
min-height: 100vh;
}
.cover {
/* background: url(bg.svg) no-repeat center center fixed; */
background-color: #313131;
background-size: cover;
color: white;
padding-left: 2.5vw;
height: 100%;
width: 100%;
}
.mainnavbar {
background: #313131b6
}
.textleft {
text-align: left;
}
.header {
font-size: xx-large;
max-width: 700px;
margin-top: 40vh;
}
.footer {
font-size: small;
margin-bottom: 40vh;
}
.cover {
background: #313131
}
</style>
</head>
<body>
<nav class="nav nav-pills nav-justified d-flex justify-content-center py-3 px-3 fixed-top mainnavbar" id="navbar">
<li class="nav-item"><a href="#features" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#pricing" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="#faqs" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#servers"...