JSFiddle - React, Tailwind, and code Playground

by Daniele Manca

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div class="pusher">
  <div class="big-grid-columns main ui fluid container">

    <div class="sixteen wide column"> 
      <div class="ui menu tertiary">
        <div class="item icon nav">
          <i class="large sidebar icon" aria-controls="navbar" aria-hidden="true"></i>
        </div>
        <div class="ui breadcrumb">
          <a href="#" class="section"><img src="../../images/breadcrumb.png"></a>
          <a href="#" class="active section">Dashboard</a>
        </div>
        <div class="right borderless menu">
          <div class="item icon right-sidebar-show">
            <i class="big help icon" aria-label="Help menu"></i>
          </div>
          <div class="item icon">
            <i class="big print icon" aria-label="Search menu"></i>
          </div>
          <div class="item icon">
            <i class="big setting icon" aria-label="Search menu"></i>
          </div>
        </div>
      </div>
    </div>   

    <div class="ui padded equal width stackable grid greyBg extra-margin">
      <div class="sixteen wide column with-margin">        
        <div class="ui equal width grid">
          <div class="left aligned column">
            <h2>My dashboard</h2>
          </div>
          <div class="right aligned column">
            <p class="greyP"><em><i class="icon refresh greyIcon"></i>Last updated 12:03AM</em></p>
          </div>
        </div>
      </div>

      <div class="two column row">
        <div class="column">
          <div class="ui green segment">
            <h3>Account and balances overview</h3>
              <div class="sixteen wide column">
                <div class="custom-segment-block tablet-column">
                  <div class="custom-segment box-shadow-none">
                    <div class="header grey">
       ...

CSS

.greenBg {
  background: #77BA00;
}
.lloydsBlack {
  background: #323233;
}
html,
body {
  height: 100%;
}
[role=main] {
  padding: 0.5em 0.5em 2em;
  overflow: hidden;
}
.ui.column.grid.example .column {
  text-align: center;
}
.ui.top.fixed.menu {
  background-color: #efefef;
  border: 0 !important;
}
.ui.top.fixed.menu .sidebar.icon {
  cursor: pointer;
}
.ui.top.fixed.menu > .item:nth-child(2) {
  width: 215px;
}
.ui.top.fixed.menu .ui.floating.label {
  top: 1em;
  left: 80%;
}
.ui.top.fixed.menu .large.header.item {
  font-size: 18px;
}
.ui.top.fixed.menu .item.icon.right-context-toggle:hover {
  background: white !important;
}
.ui.top.fixed.menu .item.icon.right-context-toggle:hover .icon {
  color: #006a4d !important;
}
.cbo.ui.left.menu {
  z-index: 3;
  overflow-y: hidden;
  position: fixed;
  left: -265px;
  top: 0;
  bottom: 0;
  margin: 0;
  border-radius: 0;
  border: 0 !important;
  width: 265px;
  margin-top: 54px;
  background-color: #323223;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
}
.cbo.ui.left.menu ~ .pusher {
  margin-left: 0;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
}
.cbo.ui.left.menu.open {
  left: 0;
  top: 3px;
}
.cbo.ui.left.menu.open ~ .pusher {
  margin-left: 265px;
}
.cbo.ui.left.menu a.item {
  color: white;
  padding: 15px 20px;
}
.cbo.ui.left.menu a.item.first {
  padding: 20px;
  border-bottom: 1px solid #505050;
}
.cbo.ui.left.menu .content.menu {
  border-bottom: 1px solid #505050;
}
.cbo.ui.left.menu .content.menu .item {
  font-size: 14px !important;
  padding: 15px 20px;
  color: #bfbfbf !important;
}
.cbo.ui.left.menu .content.menu.active .item:hover {
  color: white !important;
  background: black;
  font-weight: 500;
}
.cbo.ui.left.menu:before {
  background: #c8c8c9;
}
.cbo.ui.left.menu .title {
  color: white;
  padding: 15px 20px;
  border-bottom: 1px solid #505050;
}
.cbo.ui.left.menu .title:first-child {
  border-bottom: 1px solid #505050;
}
.cbo.ui.left.menu .title >...