JSFiddle - React, Tailwind, and code Playground

by kpowz

HTML

<h1>Example 1 <small>spans with margin-left</small></h1>
<p class="row-fluid ">
    <span><strong>State: </strong>Iowa</span>
    <span class="margin-left"><strong>Counties: </strong>Dallas</span>
    <span class="margin-left"><strong>Crops: </strong>Soybeans</span>
</p>

<h1>Example 2 <small>label spans with margin-left</small></h1>
<p class="row-fluid ">
    <span class="label label-info">Info badge</span>
    <span class="label label-inverse margin-left">Inverse badge</span>
    <span class="label label-positive margin-left">Awesome positive badge</span>
</p>

<h1>Example 3 <small>label list</small></h1>
<ul class="row-fluid">
    <li><span class="label label-info">Info badge</span></li>
    <li><span class="label label-inverse">Inverse badge</span></li>
    <li><span class="label label-positive">Awesome positive badge</span></li>
</ul>

<h1>Example 4 <small>label list horizontal</small></h1>
<ul class="row-fluid inline bunny">
    <li><span class="label label-info">Info badge</span></li>
    <li><span class="label label-inverse">Inverse badge</span></li>
    <li><span class="label label-positive">Awesome positive badge</span></li>
    <li><span class="label label-important">Overdue</span></li>
       <li><span class="label label-info">Info badge</span></li>
    <li><span class="label label-inverse">Inverse badge</span></li>
    <li><span class="label label-positive">Awesome positive badge</span></li>
    <li><span class="label label-important">Overdue</span></li>
       <li><span class="label label-info">Info badge</span></li>
    <li><span class="label label-inverse">Inverse badge</span></li>
    <li><span class="label label-positive">Awesome positive badge</span></li>
    <li><span class="label label-important">Overdue</span></li>
       <li><span class="label label-info">Info badge</span></li>
    <li><span class="label label-inverse">Inverse badge</span></li>
    <li><span class="label label-positive">Awesome positive badge</span></li>
    <li><span...

CSS

.bunny li{
  font-size: 24px;
}


/* CSS crunched with Crunch - http://crunchapp.net/ */
/*!
 * Bootstrap v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
/* Table of Contents
-----------------------------------------------------------
----------------------------------------------------------- 
1. CSS Reset
2. Core variables and mixins
    2.1 Variables
    2.2 Mixins
3. Grid system and page structure
    3.1 Scaffolding
    3.2 Grid
    3.3 Layouts
    3.4 CloudNet Fluid Grid
    3.5 Master Page
4. Base CSS
    4.1 Type
    4.2 Tables
    4.3 Forms
5. CloudNet Components
    5.1 CloudNet Main Navigation
    5.2 CloudNet Banners
    5.3 CloudNet Boxes
    5.4 Buttons
    5.5 Alerts
    5.6 Bootstrap Modal (Used for Non-Authenticated)
    5.7 Labels & Badges
    5.8 Modals & Loaders
    5.9 Bootstrap Icons
6. Utility classes
7. CloudNet Environment Stamps
*/
/* ---------------------------------------------------------------------------------
1. CSS Reset
--------------------------------------------------------------------------------- */
/* 1.1 reset.less
----------------------------------------------------------- */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:hover,
a:active {
  outline: 0;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  /* Responsive images (ensure images don't scale beyond their parents)...