JSFiddle - React, Tailwind, and code Playground

by Suryar Praveen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
<div id="bundles" class="bundles"></div>
</div>

CSS

/*************************Bundle css*******************************/
#lyca_guest_form{display:none;}

.et_pb_button.bundlespage-viewmore{color: #fff!important;text-decoration: none;text-transform: none!important;background: transparent;
border: 1px solid #fff;margin: 10px 0;}
.et_pb_homepage_banner .et_pb_media_alignment_center{background-color:#006FBA!important;}
.bundle .plan-box_scrollable-grid, .single-bundle .plan-box_scrollable-grid { background-repeat: no-repeat; background-size: cover; background-position: -4px;     box-shadow: -1px -11px 0px -6px #e3e3e3, -1px -21px 0px -12px #f0f3f5;
  -webkit-box-shadow: -1px -11px 0px -6px #e3e3e3, -1px -21px 0px -12px #f0f3f5;
  -moz-box-shadow: -1px -11px 0px -6px #e3e3e3, -1px -21px 0px -12px #f0f3f5;
 background-color: #fff;  margin-bottom: 50px;}
.plan-box_scrollable-grid{ box-sizing: border-box;width: 240px;float:left; margin-right:15px;    margin-bottom: 15px;}
.plan-box_grid { margin-top: 1rem; clear:both; display:flex;flex-wrap:wrap;position: relative;min-height: 500px;}
.plan-box { margin-bottom: .66667rem; overflow: hidden;border-top-right-radius: 10px;border-bottom-left-radius: 10px;}
.plan-box-large {text-align:center;padding-top: 0px;
margin-left: 0px;margin-right: 5px;width: 99.1453%;margin-bottom: 1.33333rem;
display: flex;flex-direction: column;flex: 1;
}
input[type=text]:focus,
input[type=number]:focus,
input.text:focus,
input.title:focus,
textarea:focus,
select:focus {
                border-color: #2d3940 !important;
                color: #2b2828;
}
.payment_details_tab_content input[type=text]:focus,
.payment_details_tab_content input[type=number]:focus,
.payment_details_tab_content input.text:focus,
.payment_details_tab_content input.title:focus,
.payment_details_tab_content textarea:focus{border-color: #fff !important;color: #2b2828;}
.plan-box_title { position: relative; color: #2B2828; overflow: hidden; text-align: center;
cursor: default; border-top-right-radius: 20px; margin-top:...

JavaScript

$(document).ready(function(){
var bundleAPI = "https://atupdatedlmweb.ldsvcplatform.com/atupdated/wp-content/uploads/json_uploads/bundle-en.json";
$.getJSON(bundleAPI, function (result){
	var bundleData = '';
	$.each(result, function (i, bundle){
bundleData += `<div class="bundle">
        <div class="plan-box_scrollable-grid">
          <div class="plan-box_grid">
            <div class="plan-box plan-box-large divclose">
              <div class="bundles_left_mobile">
                <div class="plan-box_title">
                  <h2 class="plan-box_name"><span>${bundle.bundle_title}</span></h2><span class="accordionexpand rotateaccordion"><i class="fa fa-chevron-circle-right"></i></span>
                </div>
                <div class="plan-box_new_cust_msg">
                  <p class="plan-box_cust_msg"></p>
                </div>
                <div class="plan-box_discount"><span></span></div>
                <div class="plan-box_price">
                  <div class="plan-box_price-content">
                    <p class="plan-box_old-price"><span>${bundle.existing_customer_price}</span></p>
                    <p class="plan-box_new-price price"><sup>€ </sup> <span>${bundle.new_customer_price}</span></p>
                    <p class="plan-box_period"><span>${bundle.bundle_validity}</span><span class="plan-box_new_customer_info">${bundle.new_customer_info}</span></p>
                  </div>
                </div>
              </div>
			  <div class="plan-box_content">
                <div class="plan-box_cta">`;


	$.each(bundle.display_based_order, function(j, dataDisplay){
	bundleData += `<div class="plan-box_group-call clearfix"><img src="${dataDisplay.url}" class="svg_icons_bundle_listing_page" alt="bundle">
                    <h3 class="plan-box_label"><span class="bundle-minutes-number">${dataDisplay.value}</span><span class="bundle-minutes-text plan-box_summary">
                        <font><a href="#"...