JSFiddle - React, Tailwind, and code Playground

by Snaptik

HTML

<div class="card-container"><a href="https://globalcell.online/usa/">

<div class="card">
    <div class="flag">
        <img src="https://cdn.countryflags.com/thumbs/georgia/flag-square-500.png" alt="Georgia Flag" width="100%">
    </div>
	
        <div class="country-info">
        <div class="country-name">GEORGIA+</div>
        <div class="additional-text">From $1.59/GB</div>
    </div>
    <div class="clickable-symbol"><i class="fa-solid fa-chevron-right"></i></div>
</div>
</a>

<br>

<a href="https://globalcell.online/usa/">
<div class="card">
    <div class="flag">
        <img src="https://cdn.countryflags.com/thumbs/united-states-of-america/flag-square-500.png" alt="Country Flag" width="100%">
    </div>
	
        <div class="country-info">
        <div class="country-name">USA</div>
        <div class="additional-text">From $1.59/GB</div>
    </div>
    <div class="clickable-symbol"><i class="fa-solid fa-chevron-right"></i></div>
</div>
</a>
</div>

CSS

/* Styles for the card */
    .card {
        width: 300px;
        background-color: #f0f0f0;
        border-radius: 16px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        margin:10px;
    }

    /* Styles for the flag */
    .flag {
        width: 34px;
        height: 34px;
        margin-right: 15px;
        border-radius: 50%;
        overflow: hidden;
    }

    /* Styles for country name and text */
    .country-info {
        flex: 1;
    }

    /* Style for country name */
    .country-name {
        font-size: 1em;
        font-weight: bold;
        margin-bottom: 1px;
    }

    /* Style for additional text */
    .additional-text {
        font-size: 0.9em;
        color: #666;
    }
        .clickable-symbol {
        font-size: 1.5em;
        margin-left: auto;
		margin-right:5px
    }
    .card-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }