JSFiddle - React, Tailwind, and code Playground

CSS-Only Responsive Layout with Smooth Transitions http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

by Jennifer Perrin

HTML

<div class="container">
           
            <div class="st-container">
            
                <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
                <a href="#st-panel-1">Serendipity</a>
                <input type="radio" name="radio-set" id="st-control-2"/>
                <a href="#st-panel-2">Happiness</a>
                <input type="radio" name="radio-set" id="st-control-3"/>
                <a href="#st-panel-3">Tranquillity</a>
                <input type="radio" name="radio-set" id="st-control-4"/>
                <a href="#st-panel-4">Positivity</a>
                <input type="radio" name="radio-set" id="st-control-5"/>
                <a href="#st-panel-5">Passion</a>
                
                <div class="st-scroll">
                
                    <!-- Placeholder text from http://hipsteripsum.me/ -->
                    
                    <section class="st-panel" id="st-panel-1">
                        <div class="st-deco" data-icon="H"></div>
                        <h2>Serendipity</h2>
                        <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
                    </section>
                    
                    <section class="st-panel st-color" id="st-panel-2">
                        <div class="st-deco" data-icon="2"></div>
                        <h2>Happiness</h2>
                        <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
                    </section>
                    
                    <section class="st-panel" id="st-panel-3">
                        <div class="st-deco" data-icon="B"></div>
                        <h2>Tranquillity</h2>
                        <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
             ...

CSS

@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Slab'), local('JosefinSlab'), url('http://themes.googleusercontent.com/static/fonts/josefinslab/v3/46aYWdgz-1oFX11flmyEfXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Josefin Slab Bold'), local('JosefinSlab-Bold'), url('http://themes.googleusercontent.com/static/fonts/josefinslab/v3/NbE6ykYuM2IyEwxQxOIi2Hl4twXkwp3_u9ZoePkT564.woff') format('woff');
}

.st-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}

.st-container > input,
.st-container > a {
    position: fixed;
    bottom: 0px;
    width: 20%;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
}

.st-container > input {
    opacity: 0;
    z-index: 1000;
}

.st-container > a {
    z-index: 10;
    font-weight: 700;
    background: #e23a6e;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before {
    content: '';
    position: fixed;
    width: 100%;
    height: 34px;
    background: #e23a6e;
    z-index: 9;
    bottom: 0;
}

#st-control-1, #st-control-1 + a {
    left: 0;
}

#st-control-2, #st-control-2 + a {
    left: 20%;
}

#st-control-3, #st-control-3 + a {
    left: 40%;
}

#st-control-4, #st-control-4 + a {
    left: 60%;
}

#st-control-5, #st-control-5 + a {
    left: 80%;
}

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
    background: #821134;
}

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
    bottom: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
   ...