JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<!DOCTYPE html>
<html lang="en-GB">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belgravia</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Belgravia</h1>
        <p>Avant-garde Interactive User Interfaces and Data Visualisations</p>
    </header>

    <section id="about">
        <h2>About Belgravia</h2>
        <p>Belgravia (Aka Belgravia.Blue) is a Digital Agency that specialises in cutting-edge visualisations.</p>
        <p>Our domain: belgravia.blue</p>
        <p><strong>How Belgravia Works and Limitations</strong></p>
        <p>Because Belgravia is using the latest tools and methodologies, there may be some limitation on the amount of legacy technical debt that can be incurred since it hinders the core strengths of Belgravia.</p>
        <p><strong>Discovery</strong></p>
        <p>Belgravia will typically begin from the initial conception of a project and will steer the project into a direction to avoid common pitfalls. Planning and research are crucial to Belgravia; we like to include as many stakeholders as possible in the process to yield the best possible product.</p>
        <p><strong>Compatibility</strong></p>
        <p>Belgravia typically avoids legacy technologies; what constitutes as legacy can sometimes be subjective, but as a rule of thumb, older technologies and platforms that are known for a wide amount of unjustifiable complexities are usually avoided. Belgravia is focused on today’s world (85% of the world population is mobile users).</p>
        <p><strong>Technologies</strong></p>
        <p>Belgravia has an opinionated approach to which technologies to use. The tech is crucial to productivity and outcome. Sometimes the least popular choices are the most powerful, and sometimes the technology is irrelevant, but the strategy, approach, and design flair are what make the technology shine. We believe in:</p>
       ...

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header, section, footer {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background-color: #f0f0f0;
    text-align: center;
}

header h1 {
    margin: 0;
}

section {
    margin-top: 20px;
}

h2 {
    color: #333;
}

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

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}