JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Donation Form START -->
<div class="paypal-form" >
<div class="paypal-header">
<h4 class="header-text">Donate via Paypal</h4>
<img src="https://neculaifantanaru.com/paypal.png" alt="Alternate Text" />
</div>
<!-- Identify your business so that you can collect the payments. -->
<div class="paypal-body">
<div class="col">
<div class="body-text">
<h4>RECURRENT DONATION</h4>
<p>Donate monthly to support <br>the NeculaiFantanaru.com project</p>
</div>
<div class="paypal-content">
<!-- PayPal DONATION BUTTON WITH COMBO BOX. -->
<form action="https://www.paypal.com/donate?hosted_button_id=XHH27KSZ3KQSC" method="post" class="den_webinar">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="[email protected]">
<!-- Specify a Donate button. -->
<input type="hidden" name="cmd" value="_donations">
<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<select name="amount"><option value="3.00">€3.00</option><option value="5.00">€5.00</option><option value="10.00">€10.00</option><option value="25.00">€25.00</option><option value="50.00">€50.00</option></select>
<input type="hidden" name="currency_code" value="EUR">
<!-- Display the payment button. -->
<input class="paypal-img" type="image"...
CSS
.paypal-form {
border: 2px solid #FFC734;
}
.paypal-form hr {
margin:0;
}
.paypal-form h4{
font-size:16px;
}
.paypal-form .paypal-header {
display: flex;
align-items: center;
padding: 10px 20px;
}
.paypal-form .paypal-header .header-text {
margin-right: 15px;
color: #DF662F;
margin-top: 0;
margin-bottom: 0;
font-size:15px;
}
.paypal-form .paypal-header img{
width:100px;
height:30px;
}
.paypal-form .paypal-body {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
border-top: 1px solid #efe9e9;
}
.paypal-form .paypal-body .col {
padding: 15px 15px;
padding-bottom:20px;
}
.paypal-form .paypal-body .col:first-child {
border-right: 1px solid #efe9e9;
}
.paypal-form .paypal-body h4 {
margin: 0;
background-color: #333333;
color: white;
display: inline-block;
padding: 3px 10px;
text-transform:uppercase;
font-size:14px;
}
.paypal-form .paypal-body p{
font-size:15px;
line-height:1.5;
margin-top:4px;
}
.paypal-form .paypal-content{
display:flex;
flex-direction:column;
}
.paypal-form .paypal-content form {
display: flex;
flex-direction: column;
}
.paypal-form .paypal-content select {
height: 35px;
margin-bottom: 10px;
padding-left: 5px;
border: 1px solid #bdb5b5;
}
.paypal-form .paypal-content .paypal-img {
align-self: flex-start;
border:none !important;
}
@media(max-width:768px){
.paypal-form .paypal-body {
grid-template-columns: 1fr;
}
...