JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="break20"></div>
<div class="fContainer"><div class="fItem x50">The following tools act as an addendum to the OOTB build functionality of PMW270's ServiceNow portal. In addition to this toolset, numerous minor customizations result in the look and feel of our site, however this is the framework for on-page organization and styling. To recreate custom pieces, try duplicating the widget containing the customization, then swap out the content. If further assistance is needed, call / text / teamschat Jordan Allred -- [email protected] | (425) 890-1377</div></div>
<div class="lightgreyLine"></div>
<div class="fContainer">
  <div class="fItem x10 bold">fContainer</div>
  <div class="fItem x50 code">
    <span class="break20">&lt;div class="<b>fContainer</b>"&gt;</span>
    <span class="break20 shift16">&lt;div class="fItem"&gt; ... &lt;/div&gt;</span>
    <span class="break20">&lt;/div&gt;</span>
  </div>
  <div class="fItem x40">Everything sits within an fContainer div</div>
</div>
<div class="lightgreyLine"></div>
<!-- -->
<div class="break20"></div>
<div class="fContainer">
  <div class="fItem x10 bold">fItem</div>
  <div class="fItem x50 code">
    <span class="break20">&lt;div class="fContainer"&gt;</span>
    <span class="break20 shift16">&lt;div class="<b>fItem</b>"&gt; ... &lt;/div&gt;</span>
    <span class="break20">&lt;/div&gt;</span>
  </div>
  <div class="fItem x40">fItems sit on the horizontal plane of an fContainer. You can slot them next to each other and they will automatically size based on their contents.</div>
</div>
<div class="lightgreyLine"></div>
<!-- -->
<div class="break20"></div>
<div class="fContainer">
  <div class="fItem x10 bold">x50, x33, x25, etc</div>
  <div class="fItem x50 code">
    <span class="break20">&lt;div class="fContainer"&gt;</span>
    <span class="break20 shift16">&lt;div class="fItem <b>x50</b>"&gt; ... &lt;/div&gt;</span>
    <span class="break20 shift16">&lt;div class="fItem <b>x50</b>"&gt; ......

CSS

/* ------------------------------------ fix sn */

.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-2,
.container-fluid .col-sm-2,
.container-fluid .col-md-2,
.container-fluid .col-lg-2,
.container-fluid .col-xs-3,
.container-fluid .col-sm-3,
.container-fluid .col-md-3,
.container-fluid .col-lg-3,
.container-fluid .col-xs-4,
.container-fluid .col-sm-4,
.container-fluid .col-md-4,
.container-fluid .col-lg-4,
.container-fluid .col-xs-5,
.container-fluid .col-sm-5,
.container-fluid .col-md-5,
.container-fluid .col-lg-5,
.container-fluid .col-xs-6,
.container-fluid .col-sm-6,
.container-fluid .col-md-6,
.container-fluid .col-lg-6,
.container-fluid .col-xs-7,
.container-fluid .col-sm-7,
.container-fluid .col-md-7,
.container-fluid .col-lg-7,
.container-fluid .col-xs-8,
.container-fluid .col-sm-8,
.container-fluid .col-md-8,
.container-fluid .col-lg-8,
.container-fluid .col-xs-9,
.container-fluid .col-sm-9,
.container-fluid .col-md-9,
.container-fluid .col-lg-9,
.container-fluid .col-xs-10,
.container-fluid .col-sm-10,
.container-fluid .col-md-10,
.container-fluid .col-lg-10,
.container-fluid .col-xs-11,
.container-fluid .col-sm-11,
.container-fluid .col-md-11,
.container-fluid .col-lg-11,
.container-fluid .col-xs-12,
.container-fluid .col-sm-12,
.container-fluid .col-md-12,
.container-fluid .col-lg-12 {
  padding-left: 0;
  padding-right: 0;
}


a {
  cursor: pointer;
  color: #3775D8;
}

a:active {
  opacity: .8;
}

a.lightgreyText.hoverUnderline:hover {
  text-decoration: underline !important;
  text-decoration-color: white !important;
}

.cursorPointer {
  cursor: pointer;
}

/* ----------------------------------- page spacing */
.break5 {
  display: block;
  height: 5px;
}

.break10 {
  display: block;
  height: 10px;
  flex-basis: 100%;
}

.break15 {
  display:...

JavaScript

$( document ).ready(function() {  
    $('#colorModal_show').click(function() {
        $('.colorModal').addClass('show');
        $('.colorModalExit').addClass('show');
    });  
});
$( document ).ready(function() {  
    $('#colorModal_hide').click(function() {
        $('.colorModal').removeClass('show');
        $('.colorModalExit').removeClass('show');
    });  
});

$( document ).ready(function() {  
    $('#addexternalModal_show').click(function() {
        $('.addexternalModal').addClass('show');
        $('.addexternalModalExit').addClass('show');
    });  
});
$( document ).ready(function() {  
    $('#addexternalModal_hide').click(function() {
        $('.addexternalModal').removeClass('show');
        $('.addexternalModalExit').removeClass('show');
    });  
});