JSFiddle - React, Tailwind, and code Playground

by AlexSchimp

HTML

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script>
      
  $(document).ready(function() {
    $("#accordion").accordion({
      active: false,
      //autoHeight: false,
      collapsible: true,
      change : function (event, ui) {
          if(ui.newHeader.length > 0) {
              $('html, body').animate({
                 scrollTop: $(ui.newHeader).offset().top
              }, 500);
          }
      }});
  });
  </script> 

</head>
<body style="font-size:62.5%;">
  
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
       ...