JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" method="POST" id="checkout_form">
<input type="text" size="20" class="cc-number" placeholder="Card number"/>
<input type="text" class="cc-exp" placeholder="MM/YY" />
<input type="text" class="cc-cvc" placeholder="CVC" />
<button type="submit" class="submit">Submit</button>
</form>
CSS
body{
background-color:black;
}
input{
border:none;
padding:0;
margin:0;
}
#checkout_form {
position:relative;
top:100px;
width:245px;
}
#checkout_form input {
width:218px;
height:34px;
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
}
#checkout_form input.cc-cvc{
width: 109px;
background-color: beige;
}
#checkout_form input.cc-exp{
width: 109px;
background-color: red;
}