CSSフレームワークTachyonsをデモだけで紹介

# demo1

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="result" data-user="rhistoba" data-slug-hash="ydLObo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tachyons_sample_1">
  <span>See the Pen <a href="https://codepen.io/rhistoba/pen/ydLObo/">
  tachyons_sample_1</a> by rhistoba (<a href="https://codepen.io/rhistoba">@rhistoba</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# demo2

<p class="codepen" data-height="690" data-theme-id="0" data-default-tab="result" data-user="rhistoba" data-slug-hash="JQobmm" style="height: 690px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tachyons_sample_2">
  <span>See the Pen <a href="https://codepen.io/rhistoba/pen/JQobmm/">
  tachyons_sample_2</a> by rhistoba (<a href="https://codepen.io/rhistoba">@rhistoba</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# demo3

<p class="codepen" data-height="809" data-theme-id="0" data-default-tab="result" data-user="rhistoba" data-slug-hash="KjwNrm" style="height: 809px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tachyons_sample_3">
  <span>See the Pen <a href="https://codepen.io/rhistoba/pen/KjwNrm/">
  tachyons_sample_3</a> by rhistoba (<a href="https://codepen.io/rhistoba">@rhistoba</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# demo4

<p class="codepen" data-height="645" data-theme-id="0" data-default-tab="result" data-user="rhistoba" data-slug-hash="Prwgea" style="height: 645px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tachyons_sample_4">
  <span>See the Pen <a href="https://codepen.io/rhistoba/pen/Prwgea/">
  tachyons_sample_4</a> by rhistoba (<a href="https://codepen.io/rhistoba">@rhistoba</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# demo5

<p class="codepen" data-height="1006" data-theme-id="0" data-default-tab="result" data-user="rhistoba" data-slug-hash="NZqEPN" style="height: 1006px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tachyons_sample_5">
  <span>See the Pen <a href="https://codepen.io/rhistoba/pen/NZqEPN/">
  tachyons_sample_5</a> by rhistoba (<a href="https://codepen.io/rhistoba">@rhistoba</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# demo6

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="result" data-user="rhistoba" data-slug-hash="NZGPjY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tachyons_sample_6">
  <span>See the Pen <a href="https://codepen.io/rhistoba/pen/NZGPjY/">
  tachyons_sample_6</a> by rhistoba (<a href="https://codepen.io/rhistoba">@rhistoba</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>