JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">

<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
</head>
<div class="grid-container" style="background-color:#444;">
    <form action="#">
        <div class="grid-x grid-padding-x">
      <div class="small cell">
      <label>
        <div class="input-group">
          <span class="input-group-label">test</span>
          <input class="input-group-field" type="text">
        </div>
</label>
</div>
<div class="small cell">
      <label>
        <div class="input-group">
          <span class="input-group-label">test</span>
          <input class="input-group-field" type="password">
        </div>
</label>
</div>
</div>
<div class="expanded button-group">
<button class="button" type="submit">submit</button>
<button class="button" type="button">button</button>
</div>