<ul class="list-unstyled text-white font-monospace">
    <li class="bg-red--light">bg-red--light</li>
    <li class="bg-red">bg-red</li>
    <li class="bg-red--dark">bg-red--dark</li>
    <li class="bg-blue--light">bg-blue--light</li>
    <li class="bg-blue">bg-blue</li>
    <li class="bg-blue--dark">bg-blue--dark</li>
    <li class="bg-green--lightest">bg-green--lightest</li>
    <li class="bg-green--light">bg-green--light</li>
    <li class="bg-green">bg-green</li>
    <li class="bg-green--dark">bg-green--dark</li>
    <li class="bg-orange">bg-orange</li>
    <li class="bg-orange--dark">bg-orange--dark</li>
    <li class="bg-white">bg-white</li>
    <li class="bg-gray-100 text-teamio-dark">bg-gray-100</li>
    <li class="bg-gray-200 text-teamio-dark">bg-gray-200</li>
    <li class="bg-gray-300 text-teamio-dark">bg-gray-300</li>
    <li class="bg-gray-400 text-teamio-dark">bg-gray-400</li>
    <li class="bg-gray-500">bg-gray-500</li>
    <li class="bg-gray-600">bg-gray-600</li>
    <li class="bg-gray-700">bg-gray-700</li>
    <li class="bg-gray-800">bg-gray-800</li>
    <li class="bg-gray-900">bg-gray-900</li>
    <li class="bg-black">bg-black</li>
</ul>

<div class="bg-white font-monospace">
    <p class="border-none" style="border: 1px solid red;">border-none</p>
    <p class="border-top border-top-error">border-top border-top-error</p>
    <p class="border-top border-top-gray">border-top border-top-gray</p>
    <p class="border-top border-top-gray--light">border-top border-top-gray--light</p>
    <p class="border-top border-top-gray--lighter">border-top border-top-gray--lighter</p>
    <p class="border-top border-top-gray--lightest">border-top border-top-gray--lightest</p>
</div>

<div class="font-monospace">
    <p><span class="block bg-gray-300">block</span></p>
    <p><span class="block--sm bg-gray-300">block--sm</span></p>
    <p><span class="block--md bg-gray-300">block--md</span></p>
    <p><span class="block--lg bg-gray-300">block--lg</span></p>
</div>

<div style="max-width: 600px;">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/zihI6liAPTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

<div>
    <p class="bg-gray-300 pull-left" style="padding: 1em;">pull-left</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac lorem mollis, auctor lacus eu, faucibus velit. Mauris non erat non nunc cursus consectetur. Morbi viverra maximus lectus, quis pulvinar massa porttitor sollicitudin. Aenean cursus venenatis placerat. Maecenas erat orci, placerat a consequat eget, pretium at sapien.</p>
    <p class="bg-gray-300 pull-right-lg" style="padding: 1em;">pull-right-lg</p>
    <p>Integer quis urna at magna tristique vehicula ut bibendum velit. Praesent et condimentum libero, sit amet porta leo. Morbi et venenatis libero. Quisque non magna non massa convallis tristique.</p>
</div>
<div class="clear"></div>

<div style="max-width: 300px;">
    <img src="dist/images/cand-photo.jpg" width="400" alt="" class="img-responsive">
</div>

<p><a href="#">Default link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link--no-underline">Link without decoration</a></p>

<div class="font-monospace">
    <p><span class="opacity-0">secret</span> – opacity-0</p>
    <p><span class="opacity-1">secret</span> – opacity-1</p>
</div>

<div class="font-monospace">
    <div class="bg-gray-300"><div class="bg-gray-400 pull-left" style="padding: 1em; height: 4em;">float</div> overflow initial</div>
    <div class="clear"><br></div>
    <div class="bg-gray-300 overflow-auto"><div class="bg-gray-400 pull-left" style="padding: 1em; height: 4em;">float</div> overflow-auto</div>
    <div class="clear"><br></div>
    <div class="bg-gray-300 overflow-hidden" style="height: 2.5em;"><div class="bg-gray-400 pull-left" style="padding: 1em; height: 4em;">float</div> overflow-hidden</div>
</div>

<p class="pointer-events-none"><a href="#">Anything</a> inside this <a href="#">paragraph</a> in not clickable. But <a href="#" class="pointer-events-auto">this link is an exception</a>.</p>

<div class="relative bg-gray-300 font-monospace" style="height: 100px;">
    I'm relative parent.
    <span class="bg-gray-400" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 1em;">position: absolute</span>
</div>
<br>
<div class="relative font-monospace">
    <div class="sticky-top bg-gray-400">sticky-top</div>
    <div class="bg-gray-300" style="height: 100px;"></div>
    <div class="sticky-bottom bg-gray-400">sticky-bottom</div>
</div>

<div class="font-monospace">
    <p class="shadow-sm">shadow-sm</p>
    <p class="shadow-lg">shadow-lg</p>
    <p style="box-shadow: 5px 5px 15px violet;">Ugly shadow</p>
    <p class="no-shadow" style="box-shadow: 5px 5px 15px violet;">No more ugly shadow</p>
</div>

<p><strong>Width</strong></p>
<ul class="list-unstyled font-monospace">
    <li>full-width = 100%</li>
    <li>width-auto = auto</li>
    <li>width-50px/100px/150px... 500px = width in pixels</li>
    <li>width-u-6/u-7/u-8... u-12 = width in fibonacci sequence</li>
</ul>
<p><strong>Max-width</strong></p>
<ul class="list-unstyled font-monospace">
    <li>mw-25/50/75/100 = max-width in percentage</li>
    <li>mw-50px/100px/150px... 1200px = max-width in pixels</li>
</ul>
<p><strong>Height</strong></p>
<ul class="list-unstyled font-monospace">
    <li>full-height = 100%</li>
    <li>height-auto = auto</li>
    <li>height-50px/100px/150px/200px = height in pixels</li>
    <li>height-u-6/u-7/u-8... u-12 = height in fibonacci sequence</li>
</ul>

<p><strong>Margin</strong></p>
<ul class="list-unstyled font-monospace">
    <li>m--u-1... u-12, auto = margin</li>
    <li>mx--u-1... u-12, auto = margin-left & margin-right</li>
    <li>my--u-1... u-12 = margin-top & margin-bottom</li>
    <li>mt--u-1... u-12, auto = margin-top</li>
    <li>ml--u-1... u-12, auto, checkbox, radio, switch, profile-photo, logo-block = margin-left</li>
    <li>mr--u-1... u-12, auto = margin-right</li>
    <li>mb--u-1... u-12, auto = margin-bottom</li>
</ul>
<p><strong>Padding</strong></p>
<ul class="list-unstyled font-monospace">
    <li>p--u-1... u-12 = padding</li>
    <li>px--u-1... u-12 = padding-left & padding-right</li>
    <li>py--u-1... u-12 = padding-top & padding-bottom</li>
    <li>pt--u-1... u-12 = padding-top</li>
    <li>pl--u-1... u-12 = padding-left</li>
    <li>pr--u-1... u-12 = padding-right</li>
    <li>pb--u-1... u-12 = padding-bottom</li>
</ul>

<p><strong>Text color</strong></p>
<ul class="list-unstyled font-monospace bg-white">
    <li class="text-color-inherit">text-color-inherit</li>
    <li class="text-white"><span class="bg-gray-500">text-white</span></li>
    <li class="text-gray-100">text-gray-100</li>
    <li class="text-gray-200">text-gray-200</li>
    <li class="text-gray-300">text-gray-300</li>
    <li class="text-gray-400">text-gray-400</li>
    <li class="text-gray-500">text-gray-500</li>
    <li class="text-gray-600">text-gray-600</li>
    <li class="text-gray-700">text-gray-700</li>
    <li class="text-gray-800">text-gray-800</li>
    <li class="text-gray-900">text-gray-900</li>
    <li class="text-error">text-error</li>
    <li class="text-teamio-dark">text-teamio-dark</li>
    <li class="text-teamio-pink">text-teamio-pink</li>
    <li class="text-teamio-blue">text-teamio-blue</li>
    <li class="text-pzr-primary">text-pzr-primary</li>
    <li class="text-pzr-secondary">text-pzr-secondary</li>
    <li class="text-red--light">text-red--light</li>
    <li class="text-red">text-red</li>
    <li class="text-red--dark">text-red--dark</li>
    <li class="text-orange">text-orange</li>
    <li class="text-orange--dark">text-orange--dark</li>
    <li class="text-yellow">text-yellow</li>
    <li class="text-green--light">text-green--light</li>
    <li class="text-green">text-green</li>
    <li class="text-green--dark">text-green--dark</li>
</ul>
<p><strong>Text transform</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="text-no-transform">Text-No-Transform</li>
    <li class="text-lowercase">Text-Lowercase</li>
    <li class="text-uppercase">Text-Uppercase</li>
</ul>
<p><strong>Text decoration</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="text-underline">text-underline</li>
    <li class="text-no-decoration" style="text-decoration: line-through;">text-no-decoration</li>
</ul>
<p><strong>Text align</strong></p>
<p>Responsive variants: *<strong>-sm</strong>, *<strong>-md</strong>, *<strong>-lg</strong>
<ul class="list-unstyled font-monospace">
    <li class="text-left">text-left</li>
    <li class="text-center">text-center</li>
    <li class="text-right">text-right</li>
</ul>
<p><strong>Font face</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="font-base">font-base – Open Sans</li>
    <li class="font-teamio">font-teamio – VAG Rundschrift D</li>
</ul>
<p><strong>Font size</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="text-xsmall">text-xsmall</li>
    <li class="text-small">text-small</li>
    <li class="text-base">text-base</li>
    <li class="text-larger">text-larger</li>
    <li class="text-large">text-large</li>
    <li class="text-xlarge">text-xlarge</li>
</ul>
<p><strong>Font weight</strong></p>
<ul class="list-unstyled">
    <li class="text-light">text-light</li>
    <li class="text-normal">text-normal</li>
    <li class="text-semibold">text-semibold</li>
    <li class="text-bold">text-bold</li>
</ul>
<p><strong>Line height</strong></p>
<ul class="list-unstyled">
    <li class="line-height-base"><span class="font-monospace">line-height-base</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
    <li class="line-height-small"><span class="font-monospace">line-height-small</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
    <li class="line-height-xsmall"><span class="font-monospace">line-height-xsmall</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
</ul>
<p><strong>White space</strong></p>
<ul class="list-unstyled mw-150px">
    <li class="text-wrap"><span class="font-monospace">text-wrap</span>
        <p style="word-wrap: normal;">Loremipsumdolorsitamet, consecteturadipiscingelit.</p>
    </li>
    <li class="text-nowrap"><span class="font-monospace">text-nowrap</span>
        <p>Loremipsumdolorsitamet, consecteturadipiscingelit.</p>
    </li>
    <li class="text-break-word"><span class="font-monospace">text-break-word</span>
        <p>Loremipsumdolorsitamet, consecteturadipiscingelit.</p>
    </li>
</ul>
<p><strong>Ellipsis</strong></p>
<ul class="list-unstyled">
    <li><span class="font-monospace">ellipsis</span>
    <p class="ellipsis mw-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
</ul>
<p><strong>Prefix</strong></p>
<ul class="list-unstyled font-monospace">
    <li class="prefix-dash">prefix-dash</li>
</ul>
<p><strong>Preformatted</strong></p>
<ul class="list-unstyled">
    <li><span class="font-monospace">preformatted</span>
        <p class="preformatted">Lorem ipsum
         dolor sit amet,
         consectetur
         adipiscing elit. Ut consectetur tincidunt consequat. Suspendisse ullamcorper porta semper. Curabitur et massa in nisi fringilla finibus. Curabitur sed ullamcorper nibh. In eget pulvinar tellus. Morbi eget lacus quis nisl semper facilisis. Donec sit amet nibh cursus nulla sollicitudin tempor.</p>
    </li>
    </li>
</ul>

<p class="text-xlarge bg-gray-300">Text
    <span class="text-small valign-baseline">valign-baseline</span>
    <span class="text-small valign-top">valign-top</span>
    <span class="text-small valign-middle">valign-middle</span>
    <span class="text-small valign-bottom">valign-bottom</span>
</p>

<p class="cursor-pointer">cursor-pointer</p>

<p class="user-select-none">user-select-none</p>

<div class="font-monospace">
    <p class="rounded-1" style="padding: 13px; background-color: #fff;">rounded-1</p>
    <p class="rounded-2" style="padding: 13px; background-color: #fff;">rounded-2</p>
    <p class="rounded-3" style="padding: 13px; background-color: #fff;">rounded-3</p>
    <p class="rounded-4" style="padding: 13px; background-color: #fff;">rounded-4</p>
    <p class="rounded-5" style="padding: 13px; background-color: #fff;">rounded-5</p>
    <p class="rounded-6" style="padding: 13px; background-color: #fff;">rounded-6</p>
    <p class="rounded-7" style="padding: 13px; background-color: #fff;">rounded-7</p>
    <p class="rounded-8" style="padding: 13px; background-color: #fff;">rounded-8</p>
    <p class="rounded-circle" style="padding: 13px; background-color: #fff;">rounded-circle</p>
</div>

<div class="font-monospace gap-y-6">
  <div class="bg-white">Block</div>
  <div class="bg-white">Block</div>
  <div class="bg-white">Block</div>
</div>

<div class="scrollbar-y" style="height: 200px; margin-bottom: 20px;">
    <div style="height: 200%; background: linear-gradient(to bottom, white, gray);"></div>
</div>
<div class="scrollbar-x" style="height: 200px;">
    <div style="width: 200%; height: 100%; background: linear-gradient(to right, white, gray);"></div>
</div>