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>
    <article class="grid-container" style="background-color:#ccc;">
    <form action="#">
      <div class="grid-x">
        <div class="cell large-12">
      <h1 class="text-center">test</h1>
    </div>

    <div class="cell large-12">
      <h3 class="text-center">it works! sample text here. test test test test test test test test test test test test test test</h3>
    </div>


      <div class="cell small-12">
      <label>
        <div class="input-group">
          <span class="input-group-label">test</span>
          <input class="input-group-field" type="text">
        </div>
</label>
</div>

<div class="cell small-12">
      <label>
        <div class="input-group">
          <span class="input-group-label">test</span>
          <input class="input-group-field" type="password">
        </div>
</label>
</div>

</div>

<!--Buttons setup-->
<div class="grid-margin-x">
<div class="grid-x">
  <div class="cell small-6">
    <button class="button expanded">[type submit here]</button>
  </div>
  <div class="cell small-6">
    <button class="button expanded">[type button here]</button>
  </div>
</div>
</div>
</form>
</article>