JSFiddle - React, Tailwind, and code Playground

by atlantismultimedia

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Burger House</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div class="container">
            <header class="header">
                <div class="header_top">
                    <div class="logo"></div>
                    <div class="header_top_right">
                        <div class="phone">
                            Express Delivery +1 234 567 890
                        </div>
                        <nav class="menu">
                            <ul>
                                <li>Home</li>
                                <li>Menu</li>
                                <li>Our story</li>
                                <li>Contact us</li>
                            </ul>
                        </nav> 
                    </div>
                </div>
                <div class="header_bottom">
                    <div class="header_bottom_left">
                        <div class="texte1">It is a good time for the great taste of burgers</div>
                        <div class="texte2">Burger</div>
                        <div class="texte3">Week</div>
                    </div>
                    <div class="header_bottom_right">
                        <div class="price">
                            <div class="price_number">$5<sub>.49</sub></div>
                            <div class="price_text">Only</div>
                        </div>
                    </div>
                </div>
            </header>
            <section id="section1">
                <div class="section_col_gauche">
                    <div class="img_big">
                        <div class="text_small">Try it today</div>
                        <div class="text_big">Most Popular Burger</div>
                    </div>
                </div>
                <div class="section_col_droite">
                    <div class="img_small">
    ...

CSS

/* FONT */

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Italic.woff2') format('woff2'),
        url('../font/Montserrat-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-LightItalic.woff2') format('woff2'),
        url('../font/Montserrat-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-BlackItalic.woff2') format('woff2'),
        url('../font/Montserrat-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-ExtraBoldItalic.woff2') format('woff2'),
        url('../font/Montserrat-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Black.woff2') format('woff2'),
        url('../font/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Light.woff2') format('woff2'),
        url('../font/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Bold.woff2') format('woff2'),
        url('../font/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-ExtraBold.woff2') format('woff2'),
        url('../font/Montserrat-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display:...