JSFiddle - React, Tailwind, and code Playground

by zapaza10

HTML

<div class="select_currency_new">
    <p>Выберите удобную для Вас валюту оплаты:</p>
    <form>
        <div class="group_wrapper">
        <label class="label-currency-variant"  for="RUB_currency">
            <img src="RUB-currency.png" alt="RUB">
            <input id="RUB_currency" class="currency-variant-radio" name="variant_curr" type="radio">
        </label>
        </div>
        <div class="group_wrapper">
        <label class="label-currency-variant" for="USD-currency">
            <img src="USD-currency.png" alt="USD">
            <input id="USD-currency"  class="currency-variant-radio"  name="variant_curr" type="radio">
        </label>
</div>
        <div class="group_wrapper">
        <label class="label-currency-variant" for="EUR-currency">
            <img src="EUR-currency.png" alt="EUR">
            <input id="EUR-currency" class="currency-variant-radio"  name="variant_curr" type="radio">
        </label>
</div>
        <div class="group_wrapper">
        <label class="label-currency-variant" for="UAH-cerrency">
            <img src="UAH-cerrency.png" alt="UAH">
            <input id="UAH-cerrency" class="currency-variant-radio"  name="variant_curr" type="radio">
        </label>
</div>
        <div class="group_wrapper">
        <label class="label-currency-variant" for="BLR-currency">
            <img src="BLR-currency.png" alt="BLR">
            <input id="BLR-currency" class="currency-variant-radio"  name="variant_curr" type="radio">
        </label>
</div>
    </form>
</div>

CSS

.label-currency-variant{
        width: 70px;
        height: 32px;
        border-radius: 10px;
        margin: 14px;
        text-align: center;
        display: inline-block;
        padding: 5px;
    }
    .active-labl {
        border:4px solid #eea236;
        margin:10px;

    }
    .label-currency-variant > input[type=radio]{
        display:none;
    }
    .group_wrapper{
        display: inline-block;
    }