JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<div class="wrap">

        <button class="btn btn-primary" id="loadBtn">Load Products</button>

        <ul id="productList" class="collection"></ul>

        <div class="modal hidden">
            <div class="modal-content">
                <img src="" class="modal-content__img" alt="">
                <div class="modal-content__intro">
                    <h3 class="modal-content__title"></h3>
                    <span class="modal-content__category"></span>
                    <p class="modal-content__description"></p>
                    <span class="modal-content__price"></span>
                </div>
            </div>
            <button class="btn-close btn btn-primary" onclick="closeBtn()">關閉</button>  
        </div>
        <div class="overlay hidden"></div>
        <hr>
    </div>

CSS

:root{
        --primary: #4f46e5;
        --secondary:#2563eb;
        --secondary100: #dbeafe;
        --gray800: #333;
        --white: #fff;
        --background:#e4e4e4;
        --warning100 :#ffedd5;
        --warning : #ea580c;
        --danger100 :#fee2e2;
        --danger : #dc2626;
        --success : #059669;
        --success100: #ecfdf5;
    }    
    *,
    *::after,
    *::before {
        padding: 0px;
        margin: 0px;
        font-family: inherit;
        box-sizing: border-box;
        line-height: 1.5;
    }
    html,
    body {
        height: 100vh;
    }

    body {
        font-family: sans-serif;
        font-size: 16px;
        display: flex;
        /* flex-direction: column;
        align-items: center;
        justify-content: center; */
        background-color: aliceblue;
    }
    .wrap{
        margin: 0 auto;
    }
    .btn,button{
        padding: 0.5rem 1rem;
        border: 2px solid transparent;
        border-radius: 0.25rem;
        background-color: var(--gray);
        color: #475569;
        cursor: pointer;
    }
    .btn-primary{
        background-color: var(--primary);
        color: var(--white);
    }
    .btn-primary:hover{
        background-color: #3730a3;
    }
    .btn-outline-primary{
        border-color: var(--primary);
        color: var(--primary);
        background-color: transparent;
    }
    ul,li{
        list-style: none;
    }
    .collection{
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .product-card{
        grid-column: span 1;
        /* grid-row: span 2; */
    }
    .product-item__image{
        padding: 2rem;
        max-width: 100%;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 0.875rem;
    }
    .product-item__caption{
        display: flex;
        flex-direction: column;   
    }
    .product-item__title{
        margin: 0.5rem 0;
        display:...

JavaScript

let overlay = document.querySelector('.overlay');
        let modals = document.querySelectorAll('.modal');
        let modal = document.querySelector('.modal');
        
        function openModal(){
            modal.classList.remove('hidden');
            overlay.classList.remove('hidden')
        }
        function closeBtn(){
            event.target.closest('.modal').classList.add('hidden');
            overlay.classList.add('hidden')
        }
        // 遍歷所有彈窗，在點擊overlay時關閉所有彈窗(forEach)
        modals.forEach((modal) =>{
            overlay.addEventListener('click', ()=>{
                overlay.classList.add('hidden');
                modal.classList.add('hidden');
            })
        })

        // 分割功能：創建商品元件
        function createProductCard(product){
            let productList = document.querySelector('#productList');
            let li = document.createElement('li');
            let item = document.createElement('div');
            let image = document.createElement('img');
            let caption = document.createElement('div');
            let title = document.createElement('h3');
            let price = document.createElement('span');
            let btnBox = document.createElement('div');
            let detailBtn = document.createElement('button'); 
            let deleteBtn = document.createElement('button');

            li.classList.add('product-card');
            item.classList.add('product-item');
            image.classList.add('product-item__image');
            caption.classList.add('product-item__caption');
            title.classList.add('product-item__title');
            price.classList.add('product-item__price');
            btnBox.classList.add('product-item__btnbox');
            detailBtn.classList.add('btn', 'btn-outline-primary');
            deleteBtn.classList.add('btn', 'btn-outline-danger');

            li.append(item);
            item.append(image);
            item.append(caption);
           ...