JSFiddle - React, Tailwind, and code Playground

by Coxy

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Warren Services</title>
    <meta name="Warren Services" content="Warren Services">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">  
 

    
    <link href="css/main.css" rel="stylesheet" type="text/css"> 

    </head>

    <body>
        <div class="page-container">
            <div class="container">
                    <header class="header">
                        <ul>
                            <li class="menu"><a href="#home">Home</a></li>
                            <li class="menu"><a href="#about">About</a></li>
                            <li class="menu"><a href="#cars">Cars</a></li>
                            <li class="menu"><a href="table">Table</a></li>
                            <li class="menu"><a href="footer">Footer</a></li>
                        </ul>
                    </header>

                    <div class="content-container">

                    <div id="home" class="home">
                        <h1>Warren Services</h1>
                            <p>Warren Services was founded in 1990. We are proud of our record of providing high quality manufacture of components and mechanical / electrical 
                                sub assemblies to agreed schedules offering turnkey solutions in engineering and design.</p>

                            <p>We moved into our existing premises in 2005. The factory was completely renovated and redeveloped, providing 30,000 sq ft of shopfloor area and
                                new offices which gives us a modern and well equipped factory with new machinery and cutting edge IT systems.</p>
                                
                            <p>The space is split into CNC machining, welding, fabrication...

CSS

// BASE STYLES

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

body {
font-family: Poppins,sans-serif;
font-size: 1rem;
letter-spacing: .4px;
margin: 0;
}

.page-container {
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url("../imgs/bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #000032;
}

.container {
    width: 1200px;
    align-self: center;
    z-index: 1;
    background-color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.content-container {
    width: 90%;
    text-align: center;
    align-self: center;
}

.header ul {
    display: flex;
    justify-content: space-around;
    align-content: center;
}

button {
    padding: 0;
    border: none;
    font: inherit;
    background-color: inherit  
}

ul {
      list-style-type: none;
      padding-inline-start: -40;
}

a {
    text-decoration: none;
} 

.cars-title {
    width: 80%;
}

.cars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.car {
    width: 30%;
    text-align: center;
    border: 3px solid #000032;
    margin: 5px;
    img {
        width: 100%;
        height: 200px;
    }
}

.table {
    border: 3px solid #000032;
    width: 100%;
}

JavaScript

// Charge Table

$(document).ready( function () {
    $('#table_id').DataTable();
} );

$('#table_id').DataTable( {
    paging: false,
    searching: false,
    select: true
} );

$("input[type='text']").change(function(){
    $(this).closest('td').text($(this).val())
});

var car1 = "Little White";
var car2 = "Little Grey";
var car3 = "The Tango";
var car4 = "The Gandalf";
var car5 = "Aqua";
var car6 = "Big Red";

var car_1_reg = "NP60UQQ";
var car_2_reg = "NP60UQS";
var car_3_reg = "NP60UQT";
var car_4_reg = "NP60UQU";
var car_5_reg = "NP60UQV";
var car_6_reg = "NP60UQW";

// Getting name based on registration 

var car_reg_1 = $("#car-1-reg").html();
var car_name_1 = document.getElementById('car-1-name');

$(".confirm").click(function() {
    if (car_reg_1 != car_1_reg) {
		car_name_1.innerText = 'Not a valid Registration';
	} 	else {
		car_name_1.textContent = car1;
	}
});