JSFiddle - React, Tailwind, and code Playground

by rudigerkidd

HTML

<link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/css/docs.css">
<div class="callout panel" style="background-color:#535F6D;">
  <div class="row">
    <div class="large-4 medium-4 columns">
      <div class="callout" style="">
        <p style="color:#fff;font-size:11px;text-align:left;" onclick="$('#series1').goTo();">
          Event cum exhibition
          <span style="text-transform:uppercase">
            <br/>
            Series 1
          </span>
        </p>
        <p style="color:#fff;font-size:12px;text-align:left" onclick="$('#series2').goTo();">
          Series 2
        </p>
      </div>
    </div>
    <div class="large-8 medium-8 columns" style="border-left:1px dotted #fff;">
      <div class="callout">
        <p style="color:#fff;font-size:14px;text-align:left" id="series1">
         Series 1
          <br/>
          Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text Text Text...

JavaScript

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this;
    }
})(jQuery);