JSFiddle - React, Tailwind, and code Playground

by Pangur Ban

HTML

<ol>
  <li><a href="https://jsfiddle.net/566pv8cs/3/" target="_blank">Несколько одинаковых id на странице</a></li>
  <li><span>Прибиваем футер</span>
    <ol>
      <li><a href="https://jsfiddle.net/0ydq1arc/8/" target="_blank">С помощью обертки</a></li>
      <li><a href="https://jsfiddle.net/w4pdbnfx/" target="_blank">Абсолютное позиционирование</a></li>
      <li><a href="https://jsfiddle.net/ztwv38y6/4/" target="_blank">Табличные свойства 1 😡</a></li>
      <li><a href="https://jsfiddle.net/e2pv5ey2/4/" target="_blank">Табличные свойства 2 😱</a></li>
      <li><a href="https://jsfiddle.net/m3spvhm0/3/" target="_blank">Flexbox</a></li>
    </ol>
  </li>
  <li><a href="https://jsfiddle.net/3ekem2kr/" target="_blank">SVG треугольники</a></li>
  <li><span>Центрирование</span>
    <ol>
      <li><a href="https://jsfiddle.net/dgxmt8hj/4/" target="_blank">line-height</a></li>
      <li><a href="https://jsfiddle.net/3qLq0z87/2/" target="_blank">absolute + margin</a></li>
      <li><a href="https://jsfiddle.net/bkrfp0ab/1/" target="_blank">vertical-align</a></li>
      <li><a href="https://jsfiddle.net/ctaob7e1/1/" target="_blank">table-cell</a></li>
      <li><a href="https://jsfiddle.net/voe8pb8o/2/" target="_blank">transform</a></li>
      <li><a href="https://jsfiddle.net/okxxdn3e/1/" target="_blank">flexbox 1</a></li>
      <li><a href="https://jsfiddle.net/cwnL6kdm/2/" target="_blank">flexbox 2</a></li>
    </ol>
  </li>
</ol>

<div class="copy">Created by <a href="mailto:[email protected]">a.kalin</a> for <a href="http://loftschool.com/">loftschool</a></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

body {
  font: 300 30px Roboto;
  margin: 40px 20px;
}

li {
  margin: 15px 0;
}

a:link,
a:visited {
  text-decoration: none;
  color: #42A5F5;
}

a:hover {
  color: #3949AB;
}

ol {
  list-style: none;
  counter-reset: li;
}

li:before {
  counter-increment: li;
  content: counters(li, ".") ". ";
}

html,
body {
  min-height: 100%;
}

html {
  position: relative;
}

.copy {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px;
  font-size: 14px;
  color: #c1c1c1;
}