JSFiddle - React, Tailwind, and code Playground

by Suryar Praveen

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="top-up-tabs">
	<div class="container-fluid">
	<div class="row">
	<div class="col-md-2">
	<!-- required for floating->
	<!-- Nav Tabs -->
	<ul class="nav nav-pills">
	<li class="active"><a href="#quick_topup" data-toggle="tab">Quick Top-up</a></li>
	<li><a href="#buy_newsim" data-toggle="tab">Buy New SIM</a></li>
	</ul>
	<!-- Nav Tabs -->
	</div>
	<div class="col-md-10">
	<!-- Tab panes -->
	<div class="tab-content">
	<div class="tab-pane active" id="quick_topup">
 <form class="form-inline" action="">
	<div class="input-group">
	<span class="input-group-addon">+44</span>
      <input type="text" class="form-control" placeholder="Enter number">
    </div>

	
	<div class="input-group">
      <div class="col-md-12">
	  <div class="carousel slide multi-item-carousel" id="denominations" data-interval="false" data-wrap="false" data-type="multi">
	  <div class="carousel-inner">
	  <div class="item active">
	   <div class="col-md-2 col-sm-6 col-xs-12"><a href="#" class="round">1</a></div>
	  </div>
	  <div class="item">
	    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#" class="round">2</a></div>
	  </div>
	  <div class="item">
	    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#" class="round">3</a></div>
	  </div>
	  <div class="item">
	   <div class="col-md-2 col-sm-6 col-xs-12"><a href="#" class="round">4</a></div>
	  </div>
		 <div class="item">
	   <div class="col-md-2 col-sm-6 col-xs-12"><a href="#" class="round">5</a></div>
	  </div>
		 <div class="item">
	   <div class="col-md-2 col-sm-6 col-xs-12"><a href="#" class="round">6</a></div>
	  </div>
		 <div class="item">
	   <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"...

CSS

/* Auto top-up */
.btn-toggle:before {  content: "Off";  left: -4rem;}
.btn-toggle:after {  content: "On";  right: -4rem;  opacity: 0.5;}
.btn-toggle.active {  transition: background-color 0.25s;}
.btn-toggle.btn-sm {  margin: 0 0.5rem;  padding: 0;  position: relative;  border: none;  height: 1.5rem;  width: 3rem;  border-radius: 1.5rem;}
.btn-toggle.btn-sm:before,.btn-toggle.btn-sm:after {  line-height: 1.5rem;  width: 0.5rem;  text-align: center;  font-weight: 600;  font-size: 0.55rem;  text-transform: uppercase;  letter-spacing: 2px;  position: absolute;  bottom: 0;  transition: opacity 0.25s;}
.btn-toggle.btn-sm > .handle {  position: absolute;  top: 0.1875rem;  left: 0.1875rem;  width: 1.125rem;  height: 1.125rem;  border-radius: 1.125rem;  background: #fff;  transition: left 0.25s;}
.btn-toggle.btn-sm.active > .handle {  left: 1.6875rem;  transition: left 0.25s;}
.btn-toggle.btn-sm.btn-sm:before,.btn-toggle.btn-sm.btn-sm:after {  line-height: -0.5rem;  color: #fff;  letter-spacing: 0.75px;  left: 0.41250000000000003rem;  width: 2.325rem;}
.btn-toggle.btn-sm.btn-sm:before {  text-align: right;}
.btn-toggle.btn-sm.btn-sm:after {  text-align: left;  opacity: 0;}
.btn-toggle.btn-sm.btn-sm.active:before {  opacity: 0;}
.btn-toggle.btn-sm.btn-sm.active:after {  opacity: 1;}
.btn-toggle.btn-secondary {  color: #6b7381;  background: #bdc1c8;}
.btn-toggle.btn-secondary.active {  background-color: #ff8300;}
/* END Auto top-up */

JavaScript

//Lycamobile Scripts
/*===[Core Functions] === */
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.carousel[data-type="multi"] .item').each(function(){
  var next = jQuery(this).next();
  if (!next.length) {
    next = jQuery(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo(jQuery(this));

});

});
/*===[END Core Functions] === */