JSFiddle - React, Tailwind, and code Playground

by RedGoblin17

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<div class="scroll-grid-container">
  <div class="frozelabels">
     <label for="fn">First Name</label> 
     <label for="ln">Last Name</label>
     <label for="nn">Number</label>
     <label for="fullN">Full Name:</label>
  </div>
  <div class="scrolling-wrapper" data-bind="foreach: forms">
  <div class="card" >
    <form class="form-group">
     <input id="fn" type="text" data-bind="textInput: firstName"/><br>
     <input id="ln" type="text" data-bind="textInput: lastName"/><br>
     <input id="nn" type="number" min="1" data-bind="value: number"/>
    </form>
    
    <p>
      
      <br /><strong id="fullN" data-bind="text: data"></strong>
    </p>
  </div>
</div>
</div> 

<button data-bind="click: addForm">Add New Form</button>

CSS

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  direction: rtl;
  height: auto;
  width: auto;
}

.card {
  border: 5px solid white;
  width: auto;
  height: auto;
  background: #F8F8FF;
}

.scrolling-wrapper .card {
  display: inline-block;
  direction: ltr;
}

.scrolling-wrapper > .card > p {
  float: down;
  border-top: 10px;
}

.scrolling-wrapper-flex {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.scrolling-wrapper-flex .card {
  flex: 0 0 atuo;
  margin-right: 3px;
}

.scroll-grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 5px 10px;
}

.frozelabels > label {
  display: block;
}

input {
  float: right;
}

.form-group > input {
  display: block;
}

JavaScript

function FormViewModel(){
	var self = this;
  
  self.firstName = ko.observable("");
  self.lastName = ko.observable("");
  self.number = ko.observable();
  self.data = ko.computed(
  	function(){
  		return self.firstName() + " " + self.lastName() + " " + (typeof self.number() == "undefined" ? "" : self.number());
      }, this
    );
}

function AppViewModel(){
	var self = this;
  
  self.forms = new ko.observableArray([new FormViewModel()]);
  
  self.addForm = function(){
  	self.forms.push(new FormViewModel());
  }
}
 
ko.applyBindings(new AppViewModel());