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/>
  <h1 class="ui header ">

    <div class="content">
      Supplier dashboard
      <div class="sub header">Pohjanmaan Rauta Oy</div>
    </div>
  </h1>

  <div class="ui three column  doubling  grid ">
    <div class="column">


      <div class="ui   orange inverted segment   fluid right aligned">




        Unconfirmed orders


        <h1>
          34
        </h1>

      </div>
    </div>

    <div class="column">
      <div class="ui  brown  inverted segment right aligned">
        Material specification missing


        <h1>
          23
        </h1>
      </div>

    </div>

    <div class="column">
      <div class="ui inverted red segment right aligned">

        Case info missing

        <h1>
          45
        </h1>
      </div>
    </div>

    <div class="column">
      <div class="ui inverted blue segment right aligned">

        Documentation missing

        <h1>
          78
        </h1>

      </div>
    </div>

    <div class="column">
      <div class="ui inverted teal segment right aligned">

        Late orders

        <h1>
          78
        </h1>

      </div>
    </div>

    <div class="column">
      <div class="ui inverted purple segment right aligned">

        Orders due in 10 days

        <h1>
          78
        </h1>

      </div>
    </div>
  </div>


  <div class="ui two column doubling  grid ">
    <div class="column">
      <div class="ui basic ">


        <h3 class="ui header">
          <i class="settings green icon"></i>
          <div class="content">
            My projects
            <div class="sub header">These are my favourite projects</div>
          </div>
        </h3>
        <table class="ui green  compact small unstackable table">
          <thead>
            <tr>
 ...

JavaScript

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