arliber/paylease-widget.html

## paylease-widget.html
<html>

<head>
    <style>
        .paylease-widget {
            background: #fff;
            direction: rtl;
            border: 4px solid transparent;
            border-radius: 5px;
            box-shadow: 0px 6px 23px -6px rgb(0 0 0 / 75%);
            margin-bottom: 20px;
            padding: 3px;
        }

        .paylease-hero {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f4f4f4;
            border-radius: 5px;
            padding: 5px 10px;
            border-bottom: 2px solid #eee;
        }

        .paylease-tagline {
            font-weight: 600;
            font-size: 20px;
            color: #1a7cbf;
            text-align: right;
            flex-basis: 1;
        }

        .paylease-logo {
            background-image: url('https://paylease-sdk.s3.eu-west-1.amazonaws.com/logo-with-text.png');
            background-repeat: no-repeat;
            background-size: cover;
            width: 139px;
            height: 43px;
        }

        .paylease-widget-container {
            padding: 5px 5px 15px 10px;
        }

        .paylease-widget-buttons-wrapper {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .paylease-installments {
            flex: 1 0 40%;
            background: #ffffff;
            margin: 15px;
            color: #077bbe;
            border: 2px solid #fff;
            border-radius: 12px;
            box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }

        .paylease-installments.active {
            border-color: #077bbe;
            transform: scale(1.1);
            box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.4);
        }

        .paylease-installments-button-count {
            padding: 2px 14px;
            font-size: 1em;
            border-radius: 0 0 10px 10px;
            border-top: 1px solid #077bbe;
        }

        .paylease-monthly-price {
            padding: 2px 14px;
            font-weight: 700;
            font-size: 1.7em;
        }

        @media (max-width: 575px) and (min-width: 0px) {
            .paylease-hero {
                flex-direction: column;
            }

            .paylease-logo {
                order: 1;
            }

            .paylease-tagline {
                order: 2;
                text-align: center;
            }
        }

        @media (max-width: 1000px) and (min-width: 550px) {
            .paylease-installments {
                flex: 1;
            }
        }
    </style>
</head>

<body>

    <div class="paylease-widget">
        <div class="paylease-header-container">
            <div class="paylease-hero">
                <div class="paylease-tagline">מימון בתשלומים מעבר למסגרת האשראי</div>
                <div class="paylease-logo"></div>
            </div>
        </div>
        <div class="paylease-widget-container">
            <div>
                <h3>בחר את ההחזר החודשי שנוח לך</h3>
                <div class="paylease-widget-buttons-wrapper"><button type="button" class="paylease-installments "
                        id="paylease-installments-36">
                        <div class="paylease-monthly-price">$38</div>
                        <div class="paylease-installments-button-count">36 תשלומים</div>
                    </button><button type="button" class="paylease-installments " id="paylease-installments-30">
                        <div class="paylease-monthly-price">$45</div>
                        <div class="paylease-installments-button-count">30 תשלומים</div>
                    </button><button type="button" class="paylease-installments " id="paylease-installments-24">
                        <div class="paylease-monthly-price">$56</div>
                        <div class="paylease-installments-button-count">24 תשלומים</div>
                    </button><button type="button" class="paylease-installments " id="paylease-installments-12">
                        <div class="paylease-monthly-price">$112</div>
                        <div class="paylease-installments-button-count">12 תשלומים</div>
                    </button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
	<html>

	<head>
	<style>
	.paylease-widget {
	background: #fff;
	direction: rtl;
	border: 4px solid transparent;
	border-radius: 5px;
	box-shadow: 0px 6px 23px -6px rgb(0 0 0 / 75%);
	margin-bottom: 20px;
	padding: 3px;
	}

	.paylease-hero {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f4f4f4;
	border-radius: 5px;
	padding: 5px 10px;
	border-bottom: 2px solid #eee;
	}

	.paylease-tagline {
	font-weight: 600;
	font-size: 20px;
	color: #1a7cbf;
	text-align: right;
	flex-basis: 1;
	}

	.paylease-logo {
	background-image: url('https://paylease-sdk.s3.eu-west-1.amazonaws.com/logo-with-text.png');
	background-repeat: no-repeat;
	background-size: cover;
	width: 139px;
	height: 43px;
	}

	.paylease-widget-container {
	padding: 5px 5px 15px 10px;
	}

	.paylease-widget-buttons-wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	}

	.paylease-installments {
	flex: 1 0 40%;
	background: #ffffff;
	margin: 15px;
	color: #077bbe;
	border: 2px solid #fff;
	border-radius: 12px;
	box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	}

	.paylease-installments.active {
	border-color: #077bbe;
	transform: scale(1.1);
	box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.4);
	}

	.paylease-installments-button-count {
	padding: 2px 14px;
	font-size: 1em;
	border-radius: 0 0 10px 10px;
	border-top: 1px solid #077bbe;
	}

	.paylease-monthly-price {
	padding: 2px 14px;
	font-weight: 700;
	font-size: 1.7em;
	}

	@media (max-width: 575px) and (min-width: 0px) {
	.paylease-hero {
	flex-direction: column;
	}

	.paylease-logo {
	order: 1;
	}

	.paylease-tagline {
	order: 2;
	text-align: center;
	}
	}

	@media (max-width: 1000px) and (min-width: 550px) {
	.paylease-installments {
	flex: 1;
	}
	}
	</style>
	</head>

	<body>

	<div class="paylease-widget">
	<div class="paylease-header-container">
	<div class="paylease-hero">
	<div class="paylease-tagline">מימון בתשלומים מעבר למסגרת האשראי</div>
	<div class="paylease-logo"></div>
	</div>
	</div>
	<div class="paylease-widget-container">
	<div>
	<h3>בחר את ההחזר החודשי שנוח לך</h3>
	<div class="paylease-widget-buttons-wrapper"><button type="button" class="paylease-installments "
	id="paylease-installments-36">
	<div class="paylease-monthly-price">$38</div>
	<div class="paylease-installments-button-count">36 תשלומים</div>
	</button><button type="button" class="paylease-installments " id="paylease-installments-30">
	<div class="paylease-monthly-price">$45</div>
	<div class="paylease-installments-button-count">30 תשלומים</div>
	</button><button type="button" class="paylease-installments " id="paylease-installments-24">
	<div class="paylease-monthly-price">$56</div>
	<div class="paylease-installments-button-count">24 תשלומים</div>
	</button><button type="button" class="paylease-installments " id="paylease-installments-12">
	<div class="paylease-monthly-price">$112</div>
	<div class="paylease-installments-button-count">12 תשלומים</div>
	</button>
	</div>
	</div>
	</div>
	</div>

	</body>

	</html>