JSFiddle - React, Tailwind, and code Playground

by Handpoint

HTML

<html>

<head>
    <!-- Load the jQuery library -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <!-- Load the jQuery Validator plugin -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

    <!-- Load the Hosted Payment Field library -->
    <script src="https://commerce-api.handpoint.com/sdk/web/v1/js/hostedfields.min.js"></script>


    <!-- General styles -->
    <style>
        body {
            font-family: 'Helvetica', 'Arial', sans-serif;
            color: #0074cc;
            font-size: 14pt;
            background-color: #e9ecef;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            width: 200px;
            padding: 16px;
            margin-right: 20px;
            text-align: center;
            font-family: arial;
            background-color: #ffffff;

        }

        .tab1cards {
            display: flex;
            flex-direction: row;
        }

        form-group {
            margin: 4px 0 15px 0;
        }

        .form-group LABEL {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-control {
            display: block;
            box-sizing: border-box;
            height: 34px;
            width: 400px;
            padding: 6px 12px;
            font-size: 14px;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out...