JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

CSS

@media screen
and (orientation:portrait)
{
    .toc-notInSection #toc-entries > li:nth-child(10n+1),
  .toc-notInSection #toc-entries > li:nth-child(10n+2)
  {
    width:50%; 
    height:50%;
  }
  .toc-notInSection #toc-entries > li:nth-child(10n+1) .toc-heds,
  .toc-notInSection #toc-entries > li:nth-child(10n+2) .toc-heds
  {
    top: 0;
    bottom: auto;
  }
  .toc-notInSection #toc-entries > li:nth-child(10n+1) .toc-hed,
  .toc-notInSection #toc-entries > li:nth-child(10n+2) .toc-hed
  {
    font: 30px/34px '';
  }
  .toc-notInSection #toc-entries > li:nth-child(10n+1) .toc-dek,
  .toc-notInSection #toc-entries > li:nth-child(10n+2) .toc-dek
  {
    font: 14px/20px 'HelveticaNeue';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    padding: 10px;
    color: #fff;
    background: rgba(0,0,0, .7);
  }
  #toc-sectionToggle
  {
    display: none;
  }
  #toc-sectionsContainer
  {
    position:absolute;
    top:75px;
    left:0;
    right:0;
    bottom: auto;
    background: none;
    padding:5px 10px;
    padding-bottom:100px;
    z-index:2;
    -webkit-transition:-webkit-transform .5s ease;
    -webkit-backface-visibility:hidden;
    -webkit-transform-origin:50% 0 0;
    -webkit-transform:rotate3d(1, 0, 0, 90deg)
  }
  #toc-sectionsContainer
  {
    pointer-events:auto;
    -webkit-transform:rotate3d(1, 0, 0, 0)
  }
  #toc-sections
  {
    padding-left: 60px;
    -webkit-column-width: auto;
    height: auto;
  }
    #toc-sections li
  {
    position:relative;
    display: inline-block;
    float: none;
    color:#000;
    font:22px 'Futura-CondensedMedium', 'Oswald';
    line-height:26px;
    padding: 0 18px;
    text-transform:uppercase
  }
}