JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<!-- Add animations on Braintree Hosted Fields events -->

<!-- Card numbers
4111 1111 1111 1111: Visa
5555 5555 5555 4444: MasterCard
3714 496353 98431: American Express
-->

<!--[if IE 9]>
<style>

header {
  margin-top: 1em;
  text-align: center;
}

#my-sample-form {
  margin: 0 auto;
  padding-top: 2em;
}

.bg-illustration {
  z-index: -1;
}

#button-pay {
  margin: 1em auto 0;
  display: block;
}

.cardinfo-exp-date, .cardinfo-cvv {
  width: 45%;
  float: left;
}

.cardinfo-wrapper {
  overflow: hidden;
}

</style>
<![endif]-->

<div class="form-container">
  <div class="bg-illustration">
    <svg width="801" height="570" viewBox="0 0 801 570" xmlns="http://www.w3.org/2000/svg"><path d="M695.15 540.43c-20.954 6.55-43.243 8.226-64.932 4.89 26.065-11.507 55.1-15.426 83.328-12.16-6.065 2.907-12.257 5.35-18.397 7.27m-74.984-158.957c-21.38 10.4-43.668 18.945-66.534 25.507-10.876 3.124-21.884 5.796-32.982 8.01-9.54 1.897-19.777 4.24-29.407 1.474-3.74-1.074-7.995-3.277-9.628-7.045-1.683-3.892 5.25-9.335 7.905-12.03 7.204-7.305 15.39-13.605 24.186-18.898 17.312-10.42 36.777-16.946 56.58-20.74 29.96-5.74 61.745-5.98 91.927.11-13.534 8.686-27.587 16.578-42.047 23.61M500.756 239.7c-33.755 25.25-73.15 43.654-114.53 52.324-3.04.637-17.404 1.327-11.22-4.79 4.484-4.435 9.366-8.456 14.522-12.093 8.946-6.313 18.65-11.5 28.616-16.02 22.272-10.1 45.856-17.684 69.6-23.497 8.246-2.02 16.557-3.784 24.91-5.325-3.887 3.23-7.85 6.372-11.9 9.402M342.55 48.914c-6.185 9.275-13.586 17.906-21.198 26.05-29.246 31.28-66.41 55.228-107.156 68.748-9.036 2.998-18.98 6.006-28.552 3.737-3.216-.762-9.808-3.368-10.36-7.234-.303-2.117 2.287-5.23 3.342-6.96 1.356-2.23 2.805-4.4 4.337-6.514 12.736-17.588 30.818-30.666 49.696-41.077 34.208-18.862 71.874-31.495 110.664-37.96-.256.404-.51.81-.774 1.21m457.74 519.678c-22.864-19.48-51.17-31.804-80.733-36.312 9.67-5.095 18.695-11.365 26.732-18.812 14.05-13.024 24.878-30.252 26.41-49.644...

SCSS

/*--------------------
Shared Variables
--------------------*/

$small-screen: 476px;
$grey: #111;
$blue: #5db6e8;
$darkBlue: #282c37;
$red: #E53A40;
$green: #8CD790;
$white: #fff;
$radius: 4px;
$bouncy: cubic-bezier(.20, 1.3, .7, 1);

/*--------------------
General
--------------------*/

// Position form at the center of the page
html,
body {
  font-size: 100%;
  height: 100%;
  color: $darkBlue;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

header {
  z-index: 2;
  transform: translate(0, 5.5em);
  transition: all .5s ease;
  &.header-slide {
    transform: translate(0, 0);
  }
}

h1 {
  font-weight: 100;
  font-size: 1.4em;
  display: block;
}

.form-container {
  display: flex;
  background-color: #EEE;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
  border: 1em solid #fff;
  box-sizing: border-box;
  position: relative;
  
  @media (max-width: $small-screen) {
    border: none;
  }
}

.cardinfo-wrapper {
  display: flex;
  justify-content: space-around;
}

.bg-illustration {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  svg {
    width: 100%;
  }
}

.card-shape {
  border-radius: 6px;
  padding: 2em 2em 1em;
  
  @media (max-width: $small-screen) {
    padding: 2em 1.5em 1em;
  }
}

// Form wrapper styling 
#my-sample-form {
  background-color: #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  padding: 8em 3em 2em;
  width: 20em;
  margin-bottom: 2em;
  transition: all 600ms $bouncy;
  animation: cardIntro 500ms $bouncy;
  z-index: 1;
 
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
  }
  
  @media (max-width: $small-screen) {
    box-sizing: border-box;
    padding: 7em 2em 2em;
    width: 100%;
  }
  // Change background color based on the card type
  &.visa {
    @extend .card-shape;
    color: $white;
    background-color: #0D4AA2;
  }
  &.master-card {
    @extend .card-shape;
    color: $white;
    background-color: #363636;
    background:...

JavaScript

var form = document.querySelector('#my-sample-form');
var submit = document.querySelector('input[type="submit"]');

braintree.client.create({
  authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
}, function (err, clientInstance) {
  if (err) {
    console.error(err);
    return;
  }

  // Create input fields and add text styles  
  braintree.hostedFields.create({
    client: clientInstance,
    styles: {
      'input': {
        'color': '#282c37',
        'font-size': '16px',
        'transition': 'color 0.1s',
        'line-height': '3'
      },
      // Style the text of an invalid input
      'input.invalid': {
        'color': '#E53A40'
      },
      // placeholder styles need to be individually adjusted
      '::-webkit-input-placeholder': {
        'color': 'rgba(0,0,0,0.6)'
      },
      ':-moz-placeholder': {
        'color': 'rgba(0,0,0,0.6)'
      },
      '::-moz-placeholder': {
        'color': 'rgba(0,0,0,0.6)'
      },
      ':-ms-input-placeholder ': {
        'color': 'rgba(0,0,0,0.6)'
      }

    },
    // Add information for individual fields
    fields: {
      number: {
        selector: '#card-number',
        placeholder: '1111 1111 1111 1111'
      },
      cvv: {
        selector: '#cvv',
        placeholder: '123'
      },
      expirationDate: {
        selector: '#expiration-date',
        placeholder: '10 / 2019'
      }
    }
  }, function (err, hostedFieldsInstance) {
    if (err) {
      console.error(err);
      return;
    }

    hostedFieldsInstance.on('validityChange', function (event) {
      // Check if all fields are valid, then show submit button
      var formValid = Object.keys(event.fields).every(function (key) {
        return event.fields[key].isValid;
      });

      if (formValid) {
        $('#button-pay').addClass('show-button');
      } else {
        $('#button-pay').removeClass('show-button');
      }
    });

    hostedFieldsInstance.on('empty', function (event) {
     ...