JSFiddle - React, Tailwind, and code Playground

by jimrhoskins

HTML

<div class="highlighter-bar">
    <input id="highlighter-selector">
    <input type="button" id="highlighter-execute" value="Highlight">
</div>

<!-- Testing HTML -->

<!-- Demo content taken from the normalize.css project: http://necolas.github.com/normalize.css/ --> 
        <header> 
            <hgroup> 
                <h1>Grouped Heading 1</h1> 
                <h2>Grouped Heading 2</h2> 
            </hgroup> 
            <nav class="list"> 
                <ul> 
                    <li><a href="#1">navigation item #1</a></li> 
                    <li><a href="#2">navigation item #2</a></li> 
                    <li><a href="#3">navigation item #3</a></li> 
                </ul> 
            </nav> 
        </header> 
        
        <h1>Heading 1</h1> 
        <h2>Heading 2</h2> 
        <h3>Heading 3</h3> 
        <h4>Heading 4</h4> 
        <h5>Heading 5</h5> 
        <h6>Heading 6</h6> 
        
        <section> 
            <h1>Section Heading 1</h1>            
            <article> 
                <h4>Article Heading 2</h4> 
                <address>Address: somewhere, world</address> 
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p> 
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque...

CSS

/* Change this to set highlight style */
.jquery-highlight {
    border: dashed 2px #F00;   
}

.highlighter-bar {
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    padding: 10px;
    background: #666; 
}

body {
  padding-top: 50px;   
}

JavaScript

$(function() {
    $("#highlighter-execute").click(function() {
        alert('ok');
        var selectorString = $("#highlighter-selector").val();
        
        // Remove existing highlights
        $(".jquery-highlight").removeClass("jquery-highlight");
        
        // Highlight based on selectorString
        $(selectorString).addClass("jquery-highlight");
        

    });

});