reactBen

HTML

<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="components.js" type="text/babel"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id='wrapper'>
        <h1 class='title'>Cars for Sale</h1>
        <div id='product-catalog'></div>
    </div>

    <script src="components.js" type="text/babel"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/babel" src="main.js"></script>
</body>

</html>

CSS

:root {
    --main-background-color: #F9FBF2;
    --main-top-background-color: #FBFEF9;
    --main-accent-color: #FB8F67;
    --title-color: #1E2019;
}

.button.is-primary {
    background-color: var(--main-accent-color);
}

.button.is-primary:hover {
    background-color: var(--title-color);
}

.title {
    color: var(--main-accent-color);
    font-family: 'Inconsolata', monospace;
    font-size: 3em;
}

#inner-large-banner {
    height: 40%;
    width: 100%;
    background-image: url('img/forest.jpg');
    background-size: cover;
    background-position: 50% 25%;
}

#wrapper {
    width: 80%;
    min-height: 70%;
    /* margin-top: -100px; */
    background-color: var(--main-top-background-color);
    margin: -100px auto 0 auto;
    padding: 30px;
    box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 2%);
    border-radius: .25rem;
}

#product-catalog {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.product-title {
    font-size: 2em;
}

Preact

const products = [
    {
        "id": "1",
        "name": "Touareg",
        "image": "/product_img/Mazda_CX-9_2011_34_20_270_37_6_76_68_200_16_AWD_7_4_SUV_gJa.jpg",
        "cost": "677.32",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
            "Stable & Safe: To keep your camp equipment dry, the sturdy polyester material on the outdoor tent body and the removable rain fly help to ensure water does not make its way into the inside of your waterproof tent for a dry travel",
            "Ventilation Design: Large window design for enhanced airflow. A D-style door will keep an open view. Also, two person tent comes with a storage pocket that helps to clear clutter and keep the inside of the dome tent organized. Great tents for camping",
            "Easy Set-Up & Carry: The camp tent equip with 2 ropes and 6 stakes for safe and stable. It only takes 1-2 people 5 minutes to set up. The carry bag weighs only 5.7lbs. A lightweight tent can be store in the car without taking up much space"
        ]
    },
    {
        "id": "2",
        "name": "DeVille",
        "image": "/product_img/Chevrolet_Camaro_2019_31_18_270_20_4_74_52_188_20_RWD_4_2_Convertible_Xcu.jpg",
        "cost": "3474.41",
        "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
        "bullet_description": [
            "Capacity Spacious: The 2 person tent designed for a roomy and convenient experience. The camping tent with an interior center height of 47 inches and 82.7 x 82.7 inches base dimensions, it is a spacious camp tent with plenty of space for you",
           ...