JSFiddle - React, Tailwind, and code Playground

by Bouteille Dimitri

HTML

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<main class="main">
    <form class="form">
        <header class="form-header">
            <h1>Modifier mon profil</h1>
        </header>
        <div class="form-fields">
            <div class="field">
                <label for="lname" class="field-label">Nom</label>
                <input id="lname" class="field-input" type="text">
            </div>
            <div class="field">
                <label for="fname" class="field-label">Prénom</label>
                <input id="fname" class="field-input" type="text">
            </div>
            <div class="field bio">
                <label for="content" class="field-label">Bio</label>
                <textarea name="content" class="field-input" id="content"></textarea>
            </div>
            <div class="field">
                <label for="email" class="field-label">Email</label>
                <input id="email" type="email" class="field-input" placeholder="[email protected]">
            </div>
            <div class="field">
                <label for="phone" class="field-label">Téléphone (mobile)</label>
                <input id="phone" class="field-input" type="tel">
            </div>
            <div class="field address">
                <label for="address" class="field-label">Adresse</label>
                <input id="address" class="field-input" type="text">
            </div>
            <div class="field">
                <label for="city" class="field-label">Ville</label>
                <input id="city" class="field-input" type="text">
            </div>
            <div class="field">
                <label for="zip" class="field-label">Code postal</label>
                <input id="zip" class="field-input" type="text">
            </div>
 ...

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
:root {
    --border-grey: #D2D6DB;
    --row-spacing: 25px;
    --primary: #5850EB;
}

body {
    background-color: #e5e5e5;
    font-size:        16px;
    font-weight:      400;
    color:            rgb(8,8,8);
    line-height:      19px;
    font-family:    "Roboto", sans-serif;
}

* {
    box-sizing: border-box;
}

a, button, input, textarea, fieldset, select{
    outline: none;
    border:none;
    background:none;
}

a{
    text-decoration: none;
}

button{
    cursor: pointer;
}

article, aside, dialog, div, figure, footer, header, hgroup, menu, nav, section, input, textarea, select, p{
    display: block;
}

html,body,textarea,figure,label,button,input,textarea,select,p, ul, ol,li p, li ul,li ol,p,h1,h2,h3,h4,h5,h6,span,code,fieldset, a{
    margin: 0;
    padding: 0;
}

img,table,td,blockquote,code,pre,textarea, input,video {
    max-width: 100%;
    max-height:100%;
}

img {
    width: auto;
    height: auto;
    vertical-align: middle;
}

a img {
    border: 0;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

label {
    cursor: pointer;
}

a,
i,
span,
p,
li,
b,
strong,
label,
input,
textarea,
button,
label,
select,
option
{
    font-size:    inherit;
    font-weight:  inherit;
    font-family:  inherit;
    color:        inherit;
    line-height:  inherit;
}

/** Header **/
.form-header {
    border-bottom: solid 1px var(--border-grey);
    padding-bottom: 20px;
}

/** Form **/
.form {
    background: #fff;
    padding: 26px;
}
.form-fields {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: var(--row-spacing);
    margin-top: 30px;
}
.form-footer {
    margin-top: var(--row-spacing);
}

/** Submit button **/
button {
    background: var(--primary);
    border: 1px solid #D2D6DB;
    border-radius: 6px;
    color: #fff;
    padding: 14px 18px;
    width: 100%;
    display: block;
}

/**...