JSFiddle - React, Tailwind, and code Playground

by godfrzero

HTML

<h1>Just a regular heading</h1>

<p>Mauris quis scelerisque ipsum, eget gravida lectus. Sed quis dictum sapien, ac porta tortor. Cras quis lacus sit amet nulla congue dapibus. Aenean rutrum, diam non tristique faucibus, urna lectus egestas eros, eget iaculis nunc lacus et lorem. Nunc non erat sed massa rutrum fringilla non a dolor. Nam quis quam cursus purus iaculis adipiscing in in metus. Curabitur sed mi ut odio sagittis tristique a ut mauris. Nulla sagittis faucibus metus, sit amet vehicula mi aliquam quis. Sed elementum tortor vitae condimentum commodo. Etiam aliquam ante turpis, in tempor ligula iaculis vitae. Maecenas vitae magna nec felis laoreet venenatis. Cras congue, eros et porta congue, massa sapien laoreet est, in vestibulum arcu nisi et purus. Nullam non lorem consectetur, molestie magna in, gravida dui.</p>
<p>Quisque nec rhoncus odio, sed volutpat metus. Cras ligula sem, tempor in porta sed, mollis non augue. Suspendisse at rhoncus leo. In tempor, augue id auctor iaculis, quam neque lacinia dolor, non sollicitudin lacus tortor sed odio. Vestibulum feugiat fringilla ligula ac mollis. Integer sollicitudin nibh nec turpis tincidunt tempus. Aenean turpis est, vestibulum faucibus tempor eget, vehicula nec nisi. Quisque tellus quam, cursus eu tincidunt non, viverra quis enim. Cras cursus pellentesque odio, vitae dapibus diam tempus sed. Nulla ultricies mi quis leo tempor commodo. Morbi sagittis dapibus pretium. Donec tortor risus, porttitor quis venenatis eget, pretium a sapien. Aliquam eu consectetur nisi.</p>

<h1 id="awesomeHeading">Heading 1, with replicated ID</h1>

<p>Mauris quis scelerisque ipsum, eget gravida lectus. Sed quis dictum sapien, ac porta tortor. Cras quis lacus sit amet nulla congue dapibus. Aenean rutrum, diam non tristique faucibus, urna lectus egestas eros, eget iaculis nunc lacus et lorem. Nunc non erat sed massa rutrum fringilla non a dolor. Nam quis quam cursus purus iaculis adipiscing in in metus. Curabitur sed mi ut odio...

CSS

h1 {
    margin-top: 100px;
}

JavaScript

/*
   Case 2: Target Anchor for Hypertext Links
   =========================================
   
   In this example, we're comparing two different cases:
   
   - Three headings with the same ID
   - One heading with a unique ID
   
   The HTML4.01 spec at http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
   specifies that IDs should be unique. Let's have a look at what happens when 
   they aren't, and how different browsers behave. In order to test this properly
   we'll need to use just the result iFrame, accessible by appending /show/light/
   to the fiddle URL, followed by #awesomeHeading or #uniqueID
   
   Chrome 28, Firefox 22, Safari 6.0.5, IE9: 
       Unique ID works as expected. Trying to jump to replicated ID just jumps to
       the first instance of that ID.
   
*/