JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="checkout">
    <input type="checkbox" id="cc" checked>
    <label for="cc">
        <div class="tab cc">
            <h3 class="tab__title"><span class="fa fa-chevron-left"></span>Credit Card<span class="fa fa-check"></span></h3>
            <div class="tab__content">
                <div class="input-group">
                    <input type="text" class="full cc-number" placeholder="Card Number">
                    <input type="text" class="expiry" placeholder="MM / YY"><input type="text" class="cvc" placeholder="CVC">
                    <input type="checkbox" id="remember"><label for="remember">Remember me</label>
    <button type="button" class="button--action button--circle">GO</button>
</div>
</div>
</div>
</label>

<input type="checkbox" id="agreement">
<label for="agreement">
        <div class="tab agreement">
            <h3 class="tab__title">Agreement<span class="fa fa-check"></h3>
            <div class="tab__content">
                <div class="agreement__text">
                    <p>Kombucha offal kale chips semiotics, health goth shoreditch craft beer pickled occupy gentrify wayfarers franzen. Fanny pack crucifix jean shorts portland mumblecore chartreuse. Yr migas scenester, hoodie artisan fap chicharrones brunch ramps. Waistcoat venmo austin photo booth 90's affogato, viral craft beer readymade iPhone fashion axe. Cliche health goth cold-pressed cronut banjo selfies ennui synth locavore, etsy hoodie ethical. Synth everyday carry small batch, try-hard photo booth green juice tumblr farm-to-table normcore. Irony kinfolk fanny pack, beard scenester drinking vinegar asymmetrical man braid helvetica venmo chicharrones.
                    </p>
                </div>
            </div>
        </div>
    </label>

<input type="checkbox" id="payment">
<label for="payment">
            <div class="tab payment">
                <h3 class="tab__title">Payment<span class="fa fa-check"></span></h3>
                <div class="tab__content">
  ...

CSS

/* Design by Gal Shir https://dribbble.com/shots/2501344-Checkout-Interface */
/* TODO: 
* Fix tabs not working when click is on top of a button
*/
@import "https://fonts.googleapis.com/css?family=Roboto:300, 400,700";
/*** [Colours] ***/
/*** [Resets] ***/
html {
  box-sizing: border-box;
  background: #22313F;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/*** [Vars & Mixins] ***/
/*** [Menu styling] ***/
.checkout {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 500px;
  font-family: "Roboto";
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.75);
}
.checkout input[type="checkbox"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.checkout input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
}
.checkout input[type="checkbox"] + label:first-of-type .tab {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.checkout input[type="checkbox"] + label:last-of-type .tab {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.checkout input[type="checkbox"]:checked + label .tab {
  height: 250px;
}
.checkout input[type="checkbox"]:checked + label .tab__content {
  opacity: 1;
}
.checkout input[type="checkbox"]:checked + label h3 .fa-check {
  opacity: 0;
}
.checkout .tab {
  position: relative;
  width: 100%;
  height: 83.33333px;
  padding: 0.5rem 1.5rem;
  transition: height 400ms cubic-bezier(0.72, -0.25, 0.4, 1.2);
  z-index: 2;
}
.checkout .tab__content {
  opacity: 0;
  transition: opacity 500ms ease;
}
.checkout .tab .text-large {
  font-size: 3rem;
  font-weight: 700;
}
.checkout .tab__title {
  font-weight: 300;
  margin-bottom: 35px;
}
.checkout .tab__title .fa-chevron-left {
  margin-right: 15px;
}
.checkout .tab__title .fa-check {
  position: absolute;
  right: 2rem;
  opacity: 1;
  transition: opacity 300ms ease;
}
.checkout .tab .button--action {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  height: 40px;
 ...

JavaScript

/* Design by Gal Shir https://dribbble.com/shots/2501344-Checkout-Interface */

(function() {
    var tabs = $('.checkout > label');
    
    tabs.on('click', function(e) {
        var checkbox = $(this).prev();
        console.log('tab clicked');
        if (checkbox.is(':checked')) {
            e.preventDefault();
        } else {
            // Allows only one tab to be open at a time
            $(tabs.siblings('input:checkbox')).prop('checked', false);
        }
    });
    
    $(window).on('click', function(e) {
        console.log(e.target);
    });
})();