JSFiddle - React, Tailwind, and code Playground

by Snaptik

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country Cards</title>
<style>
.card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    display: inline-block;
}

.flag {
    width: 100px; /* Adjust as needed */
    height: auto;
}

.tariff {
    font-weight: bold;
}
</style>
</head>
<body>
<div class="container" id="cardContainer">
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const countries = [
        { name: "United Kingdom", tariff: "$1" },
        { name: "United States", tariff: "$2" },
        { name: "Canada", tariff: "$3" }
        // Add more countries and tariffs as needed
    ];

    const cardContainer = document.getElementById('cardContainer');
    countries.forEach(country => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.innerHTML = `
            <img class="flag" src="https://cdn.countryflags.com/thumbs/${country.name.replace(/\s+/g, '-').toLowerCase()}/flag-800.png" alt="${country.name} Flag">
            <div>${country.name}</div>
            <div class="tariff">Tariff: ${country.tariff}</div>
        `;
        cardContainer.appendChild(card);
    });
});
</script>

</body>
</html>