JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<div class="ui container">
  <p>
    Playground
  </p>

  <div class="ui segment">


    <div class="titlePreDetails">
      Position 00010
    </div>
    <h3>
      Exhaust gas silencer
    </h3>

    <label class="ui  label">

  Ordered
 <div class="detail">5 pcs</div>
</label>

    <p>


    </p>
    <b>Delivery</b><br>
    <label class="ui  teal label">

  Checkpoint
</label> Hamiko Hacklin, Palokankaantie 6, Hamina, 49460, FI

    <p>

    </p>

    <table style="spacing:0px;padding:0px;">
      <tr>
        <td>
          <b>Requested delivery date</b><br> 12.12.2019
        </td>
        <td>
          <b>Requested delivery date</b><br> 12.12.2019
        </td>
        <td>
          Confirmed 21.12.2019
        </td>
      </tr>
    </table>



    <p>


    </p>
    <b>Shipment</b><br> Shipment 1

    <p>

    </p>
    <b>Logistics note</b><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper efficitur orci, in cursus metus facilisis tempor. Nam orci neque, porttitor eu lorem id, pellentesque scelerisque velit. All materials have been specified
    for this position.
    <p>

    </p>

    <h3>
      Material documentation
    </h3>
    <ul>
      <li><a>Manual for bolt</a> 
      <i class="close link icon"></i>
      </li>
      <li><a>Picture of the bolt</a>
        <i class="close link icon"></i>
      </li>
    </ul>
    
    
    <button class="ui basic button">
    Upload documentation
    </button> <br>
    
    <div class="ui segment">
    <h3>
    Material upload summary
    </h3>
   





    <label class="ui basic blue label">

  Processed materials in the Excel sheet
 <div class="detail">21</div>
</label>


    <label class="ui basic orange label">

  New materials added to Material database
 <div...

SCSS

.titleDetails {
  font-size: 0.8em;
  margin-top: -1.2em;
  margin-bottom: 1.5em;
  text-transform: uppercase;
  color: #555;
}

.titlePreDetails {
  font-size: 0.8em;
  margin-bottom: -2.3em;
  color: #555;
  text-transform: uppercase;
}

.lefty {
  display: inline-block;
  background-color: #ddd;
}

.flexcontainer {
  display: flex;
  background-color: #399;
  align-items: top;
  >div,
  i {
    margin: 1rem; //   background-color: #eee;
  }
}

.divide::before {
  content: "|";
  padding: 0.1rem;
}

.mute {
  font-size: 0.8rem;
  color: #333;
}

.centered {
  text-align: center;
}

JavaScript

$(document).ready(function() {
  $('#smile').popup({
    popup: '#popspecial',
    on: 'click'
  });
});